:root{
    --width-circle: 150vw;
    --radius: calc(100vw / 6);
}
/* **************slider************************** */
.slider{
    position: relative;
    width: 100vw; height: 100vh;
    background: radial-gradient(#fff, transparent 50%);
    margin-top: -50px;
    overflow: hidden;
}
.slider .list{
    width: max-content; height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.8s;
}
.slider .list .item{
    width: calc(var(--radius) * 2);
    text-align: center;
    transform: rotate(45deg);
    transition: transform 1s;
}
.slider .list .item.active{transform: rotate(0deg);}
.slider .list img{
    width: 75%;
    filter: drop-shadow(0 0 18px #000);
}
/* **************circle************************** */
.circle{
    position: absolute;
    top: 0%; left: 0%;
    width: 100%; height: 100%;
    mask: radial-gradient(280px, #fff 98%, #000);
    -webkit-mask: radial-gradient(280px, transparent 100%, #000);
    backdrop-filter: blur(8px);
    background: radial-gradient(calc(280px + 5px), #bfffac 100%, rgba(191, 255, 175, 0.533));
    pointer-events: none;
}
.circle span{
    display: block;
    height: calc(280px * 2 + 50px);
    position: absolute;
    top: 50%; left: 50%;

    --rotate: 50deg;

    transform: translate(-50%, -50%) rotate(var(--rotate));
    text-transform: uppercase;
    color: #000;
    font-size: small; font-weight: 500;
    animation: circleRotate 20s linear infinite;
}
@keyframes circleRotate{
    to{
        transform: translate(-50%, -50%) rotate(calc(var(--rotate) + 360deg));
    }
}
/* **************************************** */
.slider .content{
    position: absolute;
    bottom: 4%; left: 50%;
    width: max-content;
    transform: translateX(-50%);
    text-align: center;
    color: #0005;
}
.slider .content div:nth-child(1){
    position: absolute;
    bottom: 90px;
    transform: translateX(10%);
    /* border: 1px solid red; */
    text-transform: uppercase;
}
.slider .content div:nth-child(2){
    position: relative;
    font-size: 3rem;
    text-transform: uppercase;
}
.slider .content div:nth-child(2)::before{
    content: '';
    position: absolute;
    left: 96%; bottom: 56%;
    width: 60px; height: 60px;
    background: url(../img/leaves.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.slider .content button{
    padding: 8px 16px;
    border: 1px solid #3cff00;
    border-radius: 20px;
    background: transparent;
    color: #0005;
}

.slider .content button:hover{
    background-color: #3cff00;
}

#prev, #next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px; height: 50px;
    border: 1px solid #eee9;
    border-radius: 50%;
    background: transparent;
    background: rgba(21, 124, 0, 0.333);
    color: #eee;
    font-size: x-large;
    cursor: pointer;
    z-index: 50;
}
#prev{left: 20px;}
#next{right: 20px;}