.home {}

.home .top {
    display: flex;
    gap: 20px;
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}
.home .top .left {
    width: 100%;
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

.home .top .right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 1;
}

@media (min-width: 800px) and (max-width: 1253px) {

}

@media (max-width: 800px) {
    .home .top {
        flex-direction: column;
        gap: 10px !important;
    }

    .home .top .right {
        gap: 10px !important;
    }

    .home .top .right .row-2 {
        gap: 10px !important;
        height: 80px !important;
    }

    .home .top .right .row-2 .col {
        width: calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
    }

    .home .top .right .row {
        height: 80px !important;
    }

    .home .top .right .row .col {
        min-width: calc(100%) !important;
    }

    .home .top .right .layer-col {
        height: 80px !important;
    }

    .home .top .right .layer-margin {
        margin-top: -80px !important;
    }

    .home .top .right .descriptions {
        display: none;
    }

    .home .top .right .layer5 {
        justify-content: center !important;
    }

    .home .top .right .title {
        font-size: 18px !important;
    }

    .home .top .right .vip {border-radius: 14px !important;}
    .home .top .right .wheel {border-radius: 14px !important;}
    .home .top .right .tasks {border-radius: 14px !important;}
    .home .top .right .refer {border-radius: 14px !important;}

    .home .top .right .vip .crown {
        width: 107px !important;
        height: 81px !important;
    }

    .home .top .right .vip .layer4 .crown {
        padding-right: 20px;
    }

    .home .top .right .vip .layer3 {
        align-items: center;
        justify-content: flex-start;
    }

    .home .top .right .vip .layer3 .crown {
        animation: 10s layer-3-crown-mobile linear infinite !important;
    }
}

.home .top .right .row-2 {
    width: 100%;
    height: 196px;
    display: flex;
    gap: 20px;
}

.home .top .right .row-2 .col {
    width: calc(50% - 10px);
    min-width: 196px;
    height: inherit;
}

.home .top .right .row {
    width: 100%;
    height: 196px;
}

.home .top .right .row .col {
    width: 100%;
    min-width: calc((196px * 2) + 20px);
    height: inherit;
}

.home .top .right .vip {
    border-radius: 24px;
    background: linear-gradient(152deg, #FCB84C -37.59%, #F5691A 200.14%);
    box-shadow: 0px 25px 32.1px -15px rgba(251, 162, 62, 0.50);
}

.home .top .right .wheel {
    border-radius: 24px;
    background: linear-gradient(265deg, #4FB5FE 23.99%, #000BDB 229.42%), linear-gradient(119deg, #1F3344 -8.64%, #151A26 110.99%), #181D2B;
    box-shadow: 0px 25px 32.1px -15px rgba(54, 127, 243, 0.50);
}

.home .top .right .refer {
    border-radius: 24px;
    background: linear-gradient(84deg, #06ACA4 -1.7%, #DEFE4F 124.43%), linear-gradient(119deg, #1F3344 -8.64%, #151A26 110.99%), #181D2B;
    box-shadow: 0px 25px 32.1px -15px rgba(32, 182, 154, 0.50);
}

.home .top .right .tasks {
    border-radius: 24px;
    background: linear-gradient(102deg, #01E2D6 -4.71%, #0095FF 108.52%), linear-gradient(84deg, #06ACA4 -1.7%, #DEFE4F 124.43%), linear-gradient(119deg, #1F3344 -8.64%, #151A26 110.99%), #181D2B;
    box-shadow: 0 25px 32.1px -15px rgba(32, 125, 182, 0.50);
} 

.home .top .right .layer-col {
    width: 100%;
    height: 196px;
    overflow: hidden;
    border-radius: 24px;
    display: flex;
    cursor: pointer;
}

.layer-col.layer-margin.layer4 {
    justify-content: flex-start;
}

.home .top .right .layer-margin {
    margin-top: -196px;
}


.home .top .right .title {
    color: #FFF;
    font-family: 'Lufga';
    font-size: 23px;
    font-style: normal;
    font-weight: 800;
    padding: 0px 20px;
}

.home .top .right .descriptions {
    color: rgba(255, 255, 255, 0.50);
    font-family: 'Lufga';
    font-size: 16.67px;
    font-weight: 400;
    padding: 0px 20px;
    padding-bottom: 20px;
}

.home .top .right .light-dot {
    display: flex;
}

.home .top .right .light-dot .circle  {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    filter: blur(33px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.home .top .right .light-dot .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    filter: blur(2px);
    margin-left: -22px;
    margin-top: 15px;
}

.home .top .right .light-dot {
    display: flex;
}

/* Vip Tab */

.home .top .right .vip .light-dot .circle  {background: #FFD6A7;}
.home .top .right .vip .light-dot .dot {background: #FFD6A7;}

.home .top .right .vip .crown {
    width: 215px;
    height: 162px;
    background: url(../../../system/tabs/vip/vip-crown.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.home .top .right .vip .layer1 {
    justify-content: center;
    align-items: center;
}
.home .top .right .vip .layer2 {
    align-items: flex-end;
    justify-content: flex-end;
}

.home .top .right .vip .layer3 .crown {
    transform: scale(0.4) rotate(56deg) translate(-173px, 91px);
    filter: blur(7px);
    opacity: 0.8;
    animation: 10s layer-3-crown linear infinite;
}

@keyframes layer-3-crown {
    0% {transform: scale(0.4) rotate(56deg) translate(-173px, 91px);}
    50% {transform: scale(0.4) rotate(50deg) translate(-173px, 91px);}
    100% {transform: scale(0.4) rotate(56deg) translate(-173px, 91px);}
}  

@keyframes layer-3-crown-mobile {
    0% {transform: scale(0.8) rotate(-15deg) translate(44px, 0px);}
    50% {transform: scale(0.8) rotate(-15deg) translate(10px, 20px);}
    100% {transform: scale(0.8) rotate(-15deg) translate(44px, 0px);}
}  

.home .top .right .vip .layer4 {
    justify-content: flex-end;
    z-index: 1;
    overflow: unset;
}
.home .top .right .vip .layer4 .crown {
    transition: all 300ms;
    transform: translate(0px, 0px)
}
.home .top .right .vip .layer5 {
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

.home .top .right .vip .layer0 .light-dot {
    animation: 20s vip-tab-first-dot linear infinite;
}

@keyframes vip-tab-first-dot {
    0% {transform: translate(9px, 9px);}
    50% {transform: translate(17px, 38px);}
    100% {transform: translate(9px, 9px);}
}  

.home .top .right .vip .layer1 .light-dot {
    animation: 17s vip-tab-second-dot linear infinite;
}

@keyframes vip-tab-second-dot {
    0% {transform: translate(32px, -28px)}
    50% {transform: translate(-47px, 11px)}
    100% {transform: translate(32px, -28px)}
}  

.home .top .right .vip .layer2 .light-dot {
    animation: 17s vip-tab-third-dot linear infinite;
}

@keyframes vip-tab-third-dot {
    0% {transform: translate(-37px, -3px)}
    50% {transform: translate(-47px, 11px)}
    100% {transform: translate(-37px, -3px)}
}  

.home .top .right .col.vip:hover .layer4 .crown {
    transition: all 300ms;
    transform: translate(0px, -3px)
}

/* Wheel */
.home .top .right .wheel .light-dot .circle  {background: #fff;}
.home .top .right .wheel .light-dot .dot {background: #fff;}

.home .top .right .wheel .wheel {
    width: 205px;
    height: 222px;
    background: url(../../../system/tabs/wheel/wheel.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.home .top .right .wheel .layer1 {
    justify-content: center;
    align-items: center;
}
.home .top .right .wheel .layer2 {
    align-items: flex-end;
    justify-content: flex-end;
}

.home .top .right .wheel .layer3 .wheel {
    transform: scale(0.4) rotate(56deg) translate(-173px, 91px);
    filter: blur(7px);
    opacity: 0.8;
    animation: 10s layer-3-wheel linear infinite;
}

@keyframes layer-3-wheel {
    0% {transform: scale(0.4) rotate(56deg) translate(-243px, 58px);}
    50% {transform: scale(0.4) rotate(56deg) translate(-177px, 58px);}
    100% {transform: scale(0.4) rotate(56deg) translate(-243px, 58px);}
}  

@keyframes layer-3-wheel-mobile {
    0% {transform: scale(0.2) rotate(-61deg) translate(0, -466px);}
    50% {transform: scale(0.2) rotate(-51deg) translate(87px, -466px);}
    100% {transform: scale(0.2) rotate(-61deg) translate(0, -466px);}
}  

.home .top .right .wheel .layer4 {
    justify-content: flex-end;
    z-index: 1;
    overflow: unset;
}
.home .top .right .wheel .layer4 .wheel {
    transition: all 300ms;
    transform: scale(0.9) translate(16px, -19px);
}
.home .top .right .wheel .layer5 {
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

.home .top .right .wheel .layer0 .light-dot {
    animation: 20s wheel-tab-first-dot linear infinite;
}

@keyframes wheel-tab-first-dot {
    0% {transform: translate(17px, 38px);}
    50% {transform: translate(9px, 9px);}
    100% {transform: translate(17px, 38px);}
}  

.home .top .right .wheel .layer1 .light-dot {
    animation: 17s wheel-tab-second-dot linear infinite;
}

@keyframes wheel-tab-second-dot {
    0% {transform: translate(32px, -28px)}
    50% {transform: translate(-47px, 11px)}
    100% {transform: translate(32px, -28px)}
}  

.home .top .right .wheel .layer2 .light-dot {
    animation: 17s vip-tab-third-dot linear infinite;
}

@keyframes wheel-tab-third-dot {
    0% {transform: translate(-47px, -11px)}
    50% {transform: translate(-37px, 3px)}
    100% {transform: translate(-47px, -11px)}
}  

.home .top .right .col.wheel:hover .layer4 .wheel {
    transition: all 300ms;
    transform: scale(0.92) translate(16px, -19px)
}

.home .top .right .wheel .layer5 .title {
    padding-bottom: 20px;
    width: 10%;
}

@media(max-width: 1350px) {
    .home .top .right .col.wheel .layer4 .wheel {
        transition: all 300ms;
        transform: scale(0.7) translate(48px, -45px)
    }

    .home .top .right .col.wheel:hover .layer4 .wheel {
        transition: all 300ms;
        transform: scale(0.72) translate(48px, -45px)
    }
}

@media(max-width: 800px) {
    .home .top .right .col.wheel .layer4 .wheel {
        transition: all 300ms;
        transform: scale(0.4) translate(133px, -170px)
    }

    .home .top .right .col.wheel:hover .layer4 .wheel {
        transition: all 300ms;
        transform: scale(0.42) translate(133px, -170px)
    }

    .home .top .right .wheel .layer3 .wheel {
        animation: 10s layer-3-wheel-mobile linear infinite !important;
    }

    .home .top .right .wheel .layer5 .title {
        width: 100%;
        padding-bottom: 0px;
    }
}

/* Refer */
.home .top .right  .refer .light-dot .circle  {background: #fff;}
.home .top .right  .refer .light-dot .dot {background: #fff;}

.home .top .right  .refer .package {
    width: 260px;
    height: 252px;
    background: url(../../../system/tabs/refer/package.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.home .top .right  .refer .money {
    width: 100%;
    height: 196px;
    background: url(../../../system/tabs/refer/money-desktop.png);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: all 300ms;
    animation: 10s refer-tab-money linear infinite;
}

@keyframes refer-tab-money {
    0% {background-position: 0px 0px;}
    50% {background-position: 0px -10px;}
    100% {background-position: 0px 0px;}
} 

.home .top .right  .refer .layer6 .title.mobile {
    display: none;
}

@media (max-width: 800px) {
    .home .top .right  .refer .money {
        width: 100%;
        height: 80px;
        background: url(../../../system/tabs/refer/money-mobile.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .home .top .right .refer .layer5 {
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .home .top .right  .refer .layer6 {
        justify-content: center !important;
    }

    .home .top .right  .refer .layer6 .descriptions {
        display: none;
    }

    .home .top .right  .refer .layer6 .title.desktop {
        display: none;
    }

    .home .top .right  .refer .layer6 .title.mobile {
        display: unset !important;
    }

    .home .top .right .refer .layer6 {
        width: 100% !important;
    }

    .home .top .right  .refer .layer5 .package {
        transform: translate(62px, 10px) scale(0.3) !important;
        transition: all 300ms;
    }
    
    .home .top .right  .refer:hover .layer5 .package {
        transform: translate(62px, 10px) scale(0.32) !important;
        transition: all 300ms;
    }
}

.home .top .right  .refer .layer1 {
    justify-content: center;
    align-items: center;
}
.home .top .right  .refer .layer2 {
    align-items: flex-end;
    justify-content: flex-end;
}

.home .top .right  .refer .layer5 {
    justify-content: flex-end;
    z-index: 1;
    overflow: unset;
}

.home .top .right .refer .layer0 .light-dot {
    animation: 20s refer-tab-first-dot linear infinite;
} 

.home .top .right  .refer .layer1 .light-dot {
    animation: 17s refer-tab-second-dot linear infinite;
}

.home .top .right  .refer .layer2 .light-dot {
    animation: 17s refer-tab-third-dot linear infinite;
}

@keyframes refer-tab-first-dot {
    0% {transform: translate(50px, 17px);}
    50% {transform: translate(-10px, 50px);}
    100% {transform: translate(50px, 17px);}
}  

@keyframes refer-tab-second-dot {
    0% {transform: translate(60px, -50px)}
    50% {transform: translate(10px, 11px)}
    100% {transform: translate(60px, -50px)}
}  

@keyframes refer-tab-third-dot {
    0% {transform: translate(-50px, -100px)}
    50% {transform: translate(-47px, 11px)}
    100% {transform: translate(-50px, -100px)}
}  

.home .top .right  .refer .layer5 {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.home .top .right  .refer .layer6 {
    position: relative;
    overflow: hidden;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.home .top .right  .refer .layer5 .package {
    transform: translate(23px, -26px) scale(0.7);
    transition: all 300ms;
}

.home .top .right  .refer:hover .layer5 .package {
    transform: translate(23px, -26px) scale(0.72); 
    transition: all 300ms;
}

/* tasks */
.home .top .right  .tasks .light-dot .circle  {background: #fff;}
.home .top .right  .tasks .light-dot .dot {background: #fff;}

.home .top .right  .tasks .diamond {
    width: 100px;
    height: 91px;
    background: url(../../../system/tasks/diamond.png);
    background-size: 100%;
    background-repeat: no-repeat;
} 
 
@keyframes tasks-tab-money {
    0% {background-position: 0px 0px;}
    50% {background-position: 0px -10px;}
    100% {background-position: 0px 0px;}
} 

.home .top .right  .tasks .layer6 .title.mobile {
    display: none;
}

@media (max-width: 800px) {
    .home .top .right .tasks .layer5 {
        /* align-items: center !important; */
        /* justify-content: flex-end !important; */
    }

    .home .top .right  .tasks .layer6 {
        justify-content: center !important;
    }

    .home .top .right  .tasks .layer6 .descriptions {
        display: none;
    }

    .home .top .right  .tasks .layer6 .title.desktop {
        display: none;
    }

    .home .top .right  .tasks .layer6 .title.mobile {
        display: unset !important;
    }

    .home .top .right .tasks .layer6 {
        width: 100% !important;
    }
/* 
    .home .top .right  .tasks .layer5 .diamond {
        transform: translate(2px, 3px) scale(0.6) !important;
        transition: all 300ms;
        filter: blur(1px) !important;
    }
    
    .home .top .right  .tasks:hover .layer5 .diamond {
        transform: translate(82px, 0px) scale(0.32) !important;
        transition: all 300ms;
    } 

    .home .top .right  .tasks .layer4 .diamond {
        transform: translate(-38px, 30px) scale(0.3) rotate(45deg) !important;
        transition: all 300ms;
        filter: blur(1px) !important;
    }
    
    .home .top .right  .tasks:hover .layer4 .diamond {
        transform: translate(82px, 0px) scale(0.32) !important;
        transition: all 300ms;
    }  */
}

.home .top .right  .tasks .layer1 {
    justify-content: center;
    align-items: center;
}
.home .top .right  .tasks .layer2 {
    align-items: flex-end;
    justify-content: flex-end;
}

.home .top .right  .tasks .layer5 {
    justify-content: flex-end;
    z-index: 1;
    overflow: unset;
}

.home .top .right .tasks .layer0 .light-dot {
    animation: 20s tasks-tab-first-dot linear infinite;
} 

.home .top .right  .tasks .layer1 .light-dot {
    animation: 17s tasks-tab-second-dot linear infinite;
}

.home .top .right  .tasks .layer2 .light-dot {
    animation: 17s tasks-tab-third-dot linear infinite;
}

@keyframes tasks-tab-first-dot {
    0% {transform: translate(50px, 17px);}
    50% {transform: translate(-10px, 50px);}
    100% {transform: translate(50px, 17px);}
}  

@keyframes tasks-tab-second-dot {
    0% {transform: translate(60px, -50px)}
    50% {transform: translate(10px, 11px)}
    100% {transform: translate(60px, -50px)}
}  

@keyframes tasks-tab-third-dot {
    0% {transform: translate(-50px, -100px)}
    50% {transform: translate(-47px, 11px)}
    100% {transform: translate(-50px, -100px)}
}  

.home .top .right  .tasks .layer5 {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.home .top .right  .tasks .layer6 {
    position: relative;
    overflow: hidden;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.home .top .right  .tasks .layer5 .diamond {
    transform: translate(-23px, 24px) rotate(-25deg) scale(1);
    transition: all 300ms;
    filter: blur(1px);
}

.home .top .right  .tasks:hover .layer5 .diamond {
    transform: translate(-23px, 24px) rotate(-15deg) scale(1.01);
    transition: all 300ms;
}   

.home .top .right  .tasks .layer4 .diamond {
    transform: translate(1px, 14px) rotate(25deg) scale(0.6);
    transition: all 300ms;
    filter: blur(2px);
}

.home .top .right  .tasks:hover .layer4 .diamond {
    transform: translate(1px, 14px) rotate(25deg) scale(0.5);
    transition: all 300ms;
}


/* @media (max-width: 1200px) {
    .home .top .right  .tasks .layer5 .diamond {
        transform: translate(-127px, 4px) rotate(35deg) scale(0.65);
        transition: all 300ms;
        filter: blur(5px);
    }

    .home .top .right  .tasks:hover .layer5 .diamond {
        transform: translate(-127px, 4px) rotate(35deg) scale(0.65);
        transition: all 300ms;
    }   

    .home .top .right  .tasks .layer4 .diamond {
        transform: translate(113px, 24px) rotate(-15deg) scale(1);
        transition: all 300ms;
        filter: blur(1px);
    }

    .home .top .right  .tasks:hover .layer4 .diamond {
        transform: translate(113px, 24px) rotate(-15deg) scale(1.02);
        transition: all 300ms;
    }   
} */

@media (max-width: 800px) {
    .home .top .right .tasks .layer4 {
        justify-content: flex-start;
    }

    .home .top .right .tasks .layer5 {
        justify-content: flex-end !important;
    }

    .home .top .right .tasks .layer5 .diamond {
        transform: translate(13px, 0px) rotate(-35deg) scale(0.6) !important;
        transition: all 300ms !important;
        filter: blur(0px) !important;
    }

    .home .top .right .tasks:hover .layer5 .diamond {
        transform: translate(13px, 0px) rotate(-25deg) scale(0.62) !important;
        transition: all 300ms !important;
    }   

    .home .top .right .tasks .layer4 .diamond {
        transform: translate(-27px, 28px) rotate(25deg) scale(0.4) !important;
        transition: all 300ms;
        filter: blur(4px) !important;
    }

    .home .top .right .tasks:hover .layer4 .diamond {
        transform: translate(-47px, 32px) rotate(25deg) scale(0.41) !important;
        transition: all 300ms; 
    } 
}