@import url("https://fonts.cdnfonts.com/css/bebas-neue");@import url("https://fonts.cdnfonts.com/css/poppins");.slider-container{margin:0;font-size:15px;background-color:transparent;min-height:100vh}.slider{color:#eee;width:80vw;height:95vh;position:relative;overflow:hidden;margin-top:-70px;margin-left:auto;margin-right:auto}.slider .list .item{position:absolute;inset:0 0 0 0;display:flex;justify-content:center;align-items:center;transition:1s;pointer-events:none;opacity:0}.slider .list .item.active{pointer-events:auto;opacity:1}.slider .list .item .content{position:absolute;top:25%;left:50%;transform:translateX(-50%);width:max-content;max-width:100%;display:grid;grid-template-columns:300px 350px;gap:150px;font-size:.85em;text-transform:uppercase;font-family:Poppins;text-shadow:0 0 80px #000;z-index:3}.slider .list .item .content h2{font-size:6em;font-family:Bebas Neue,sans-serif;line-height:.9em;transform:translateY(-100%);transition:transform 1s;grid-row-start:1;grid-row-end:3;text-align:left;margin-left:-30px;padding-right:20px;text-shadow:0 4px 12px rgba(0,0,0,.7),0 0 30px hsla(0,0%,100%,.3),0 2px 5px rgba(0,0,0,.9),0 15px 25px rgba(0,0,0,.8),0 -2px 4px hsla(0,0%,100%,.2);font-weight:700;color:#fff;letter-spacing:2px}.slider .list .item .content div.paragraphs{background:rgba(0,0,0,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;padding:30px;box-shadow:0 4px 30px rgba(0,0,0,.3);border:1px solid hsla(0,0%,100%,.1);display:flex;flex-direction:column;gap:20px;text-align:right;margin-right:-100px;max-width:300px;margin-top:120px;position:relative;right:-30px}.slider .list .item .content p{text-align:right;padding-left:40px;line-height:1.8;letter-spacing:.5px;margin:0;font-size:.95em;word-wrap:break-word;hyphens:auto;text-shadow:0 2px 4px rgba(0,0,0,.3);font-weight:300}.slider .list .item .image{flex-shrink:0;width:var(--diameter);height:var(--diameter);position:relative;transition:1s;z-index:1}.slider .list .item .image:after{inset:0;transform:rotate(-60deg);filter:blur(10px) brightness(.9);opacity:.8;z-index:1}.slider .list .item .image:after,.slider .list .item .image:before{content:"";position:absolute;background-image:var(--url);background-size:cover;background-position:50%;background-repeat:no-repeat;transition:1s}.slider .list .item .image:before{width:45%;height:45%;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-120deg);border-radius:50%;z-index:2}.slider .item.active .image:after{transform:rotate(0deg)}.slider .item.active .image:before{transform:translate(-50%,-50%) rotate(0deg)}.slider .item.active:hover .image:after{filter:blur(10px) brightness(1.1)}.slider .item.active:hover .image:before{filter:brightness(1.2)}.arrows{position:fixed;left:50%;transform:translateX(-50%);bottom:40px;width:min(1000px,80vw);display:flex;justify-content:space-between;z-index:100;pointer-events:auto;padding:0 20px;box-sizing:border-box}.arrows button{all:unset;cursor:pointer;transition:transform .3s ease,opacity .3s ease;color:#fff;background:rgba(0,0,0,.7);padding:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:1;box-shadow:0 2px 10px rgba(0,0,0,.3);pointer-events:auto}.arrows button svg{width:35px;height:35px;stroke-width:3;stroke:#fff}.arrows button:hover{transform:scale(1.1);background:rgba(0,0,0,.9)}.arrows button.dNone{display:none}.slider .list .item.active .content h2:hover{color:#fff;text-shadow:0 4px 12px rgba(0,0,0,.7),0 0 40px hsla(0,0%,100%,.5),0 2px 5px rgba(0,0,0,.9),0 15px 25px rgba(0,0,0,.8),0 -2px 4px hsla(0,0%,100%,.3),0 0 60px hsla(0,0%,100%,.3);transform:scale(1.02);transition:all .3s ease}.slider .list .item.active .content div.paragraphs:hover{background:rgba(0,0,0,.7);transform:translateY(-5px);transition:all .3s ease}.slider .list .item.active .content div.paragraphs:hover p{opacity:.9}@media (max-width:1024px){.slider .list .item .content{grid-template-columns:300px 350px;gap:150px}.slider .list .item .content h2{font-size:5em;margin-left:-25px}.slider .list .item .content div.paragraphs{margin-top:100px;padding-right:30px;right:-30px}}@media (max-width:767px){.slider{position:relative;height:100vh;overflow:hidden}.slider .list .item .content{grid-template-columns:100%;gap:15px;top:auto;bottom:10%;width:95%;padding:0 10px;box-sizing:border-box}.slider .list .item .content h2{font-size:2.8em;text-align:center;padding:0;margin:0 0 20px}.slider .list .item .content div.paragraphs{margin:0;padding:25px;right:0;width:100%;max-width:none;box-sizing:border-box;background:rgba(0,0,0,.75)}.slider .list .item .content p{font-size:.85em;line-height:1.7;padding:0;text-align:center}.arrows{position:absolute;bottom:12px;width:70vw;padding:0 10px}.arrows button{padding:10px}.arrows button svg{width:24px;height:24px;stroke-width:2.5}}.dNone{opacity:0;pointer-events:none}.slider .list .item.active .content h2{transform:translateY(0)}body{margin:0;padding:0;overflow-x:hidden;background-color:#000}.svg-container{position:relative;width:110px;height:110px;transition:width .5s ease-in-out,height .5s ease-in-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.svg-background{animation:fill-sequence 3s ease-in-out forwards}.svg-background,.svg-foreground{position:absolute;top:0;left:0;width:100%;height:100%;clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}.svg-foreground{animation:fill-up 2s ease-in-out 3s forwards,glitch .5s 3s infinite}@keyframes fill-sequence{0%{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}50%{clip-path:polygon(100% 100%,100% 0,0 0,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}@keyframes fill-up{0%{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}@keyframes glitch{0%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}to{transform:translateX(0)}}.svg-final{display:none;position:absolute;top:0;left:0;width:100%;height:100%}.svg-final.active .svg-background,.svg-final.active .svg-foreground{animation:none;clip-path:circle(0 at 50% 50%);animation:fill-up 2s ease-in-out forwards}@keyframes fill-from-center{0%{clip-path:circle(0 at 50% 50%)}to{clip-path:circle(100% at 50% 50%)}}