button{position:relative;width:11em;height:4em;outline:none;transition:.1s;background-color:transparent;border:none;font-size:13px;font-weight:700;color:#ddebf0}#clip{--color:#2761c3;top:0;overflow:hidden;width:100%;height:100%;border:5px double var(--color);box-shadow:inset 0 0 15px #195480;-webkit-clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}#clip,.arrow{position:absolute}.arrow{transition:.2s;background-color:#2761c3;top:35%;width:11%;height:30%}#leftArrow{left:-13.5%;-webkit-clip-path:polygon(100% 0,100% 100%,0 50%)}#rightArrow{-webkit-clip-path:polygon(100% 49%,0 0,0 100%);left:102%}button:hover #rightArrow{background-color:#a039dd;left:-15%;animation:rightArrow8 .6s ease-in-out infinite alternate both}button:hover #leftArrow{background-color:#9c1ad3;left:103%;animation:leftArrow8 .6s ease-in-out infinite alternate both}.corner{position:absolute;width:4em;height:4em;background-color:#2761c3;box-shadow:inset 1px 1px 8px #2781c3;transform:scale(1) rotate(45deg);transition:.2s}#rightTop{top:-1.98em;left:91%}#leftTop{top:-1.96em;left:-3em}#leftBottom{top:2.1em;left:-2.15em}#rightBottom{top:45%;left:88%}button:hover #leftTop{animation:changeColor8 .1s ease-in-out .05s both,lightEffect8 .2s linear .4s both}button:hover #rightTop{animation:changeColor8 .1s ease-in-out .15s both,lightEffect8 .2s linear .4s both}button:hover #rightBottom{animation:changeColor8 .1s ease-in-out .25s both,lightEffect8 .2s linear .4s both}button:hover #leftBottom{animation:changeColor8 .1s ease-in-out .35s both,lightEffect8 .2s linear .4s both}button:hover .corner{transform:scale(1.25) rotate(45deg)}button:hover #clip{animation:greenLight8 .2s ease-in-out .55s both;--color:#27c39f}@keyframes changeColor8{0%{background-color:#2781c3}to{background-color:#27c39f}}@keyframes lightEffect8{0%{box-shadow:1px 1px 5px #27c39f}to{box-shadow:0 0 2px #27c39f}}@keyframes greenLight8{to{box-shadow:inset 0 0 32px #27c39f}}@keyframes leftArrow8{0%{transform:translate(0)}to{transform:translateX(10px)}}@keyframes rightArrow8{0%{transform:translate(0)}to{transform:translateX(-10px)}}.btn{--border-color:linear-gradient(-45deg,#ffae00,#7e03aa,#00fffb);--border-width:0.125em;--curve-size:0.5em;--blur:30px;--bg:#080312;--color:#afffff;color:var(--color);cursor:pointer;position:relative;isolation:isolate;display:inline-grid;place-content:center;padding:.5em 1.5em;font-size:17px;border:0;text-transform:uppercase;box-shadow:10px 10px 20px rgba(0,0,0,.6);clip-path:polygon(0 var(--curve-size),var(--curve-size) 0,100% 0,100% calc(100% - var(--curve-size)),calc(100% - var(--curve-size)) 100%,0 100%);transition:color .25s}.btn:after,.btn:before{content:"";position:absolute;inset:0}.btn:before{background:var(--border-color);background-size:300% 300%;animation:move-bg7234 5s ease infinite;z-index:-2}@keyframes move-bg7234{0%{background-position:31% 0}50%{background-position:70% 100%}to{background-position:31% 0}}.btn:after{background:var(--bg);z-index:-1;clip-path:polygon(var(--border-width) calc(var(--curve-size) + var(--border-width) * .5),calc(var(--curve-size) + var(--border-width) * .5) var(--border-width),calc(100% - var(--border-width)) var(--border-width),calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)),var(--border-width) calc(100% - var(--border-width)));transition:clip-path .5s}.btn:where(:hover,:focus):after{clip-path:polygon(calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),calc(100% - var(--border-width)) var(--border-width),calc(100% - var(--border-width)) var(--border-width),calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)),calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)));transition:.2s}.btn:where(:hover,:focus){color:#fff}.btn1{font-size:1.2rem;padding:1rem 2.5rem;border:none;outline:none;border-radius:.4rem;cursor:pointer;text-transform:uppercase;background-color:rgb(14,14,26);color:rgb(234,234,234);font-weight:700;transition:.6s;box-shadow:0 0 60px #1f4c65;-webkit-box-reflect:below 10px linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.4))}.btn1:active{scale:.92}.btn1:hover{background:rgb(2,29,78);background:linear-gradient(270deg,rgba(2,29,78,.681),rgba(31,215,232,.873) 60%);color:rgb(4,4,38)}.outer{width:250px;height:250px;border-radius:10px;padding:1px;background:radial-gradient(circle 230px at 0 0,#ffffff,#0c0d0d);position:relative}.dot{width:5px;aspect-ratio:1;position:absolute;background-color:#fff;box-shadow:0 0 10px #ffffff;border-radius:100px;z-index:2;right:10%;top:10%;animation:moveDot 6s linear infinite}@keyframes moveDot{0%,to{top:10%;right:10%}25%{top:10%;right:calc(100% - 35px)}50%{top:calc(100% - 30px);right:calc(100% - 35px)}75%{top:calc(100% - 30px);right:10%}}.card1{z-index:1;width:100%;height:100%;border-radius:9px;border:1px solid #202222;background-size:20px 20px;background:radial-gradient(circle 280px at 0 0,#e659e6,#ad4cc1);align-items:center;justify-content:center;color:#fff}.ray{width:220px;height:45px;border-radius:100px;position:absolute;background-color:#c7c7c7;opacity:.4;box-shadow:0 0 50px #fff;filter:blur(10px);transform-origin:10%;top:0;left:0;transform:rotate(40deg)}.card1 .text{font-weight:bolder;font-size:4rem;background:linear-gradient(45deg,#d11ee4 4%,#fff,#000);background-clip:text;color:transparent}.line{width:100%;height:1px;position:absolute;background-color:#9317db}.topl{top:10%;background:linear-gradient(90deg,#888888 30%,#1d1f1f 70%)}.bottoml{bottom:10%}.leftl{left:10%;background:linear-gradient(180deg,#747474 30%,#222424 70%)}.leftl,.rightl{width:1px;height:100%}.rightl{right:10%}.super-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 28px;background:linear-gradient(145deg,#0f0f0f,#1c1c1c);border:2px solid rgba(255,255,255,.2);border-radius:100px;color:#fff;font-size:16px;font-weight:600;letter-spacing:.5px;cursor:pointer;overflow:hidden;transition:all .4s ease-in-out;box-shadow:0 0 20px rgba(0,255,255,.1);backdrop-filter:blur(8px);z-index:1}.super-button:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,#00ffff,#ff00ff,#00ffff);animation:rotate 4s linear infinite;z-index:-2}.super-button:after{content:"";position:absolute;inset:2px;background:#0a0a0a;border-radius:inherit;z-index:-1}.super-button:hover{transform:scale(1.05);box-shadow:0 0 40px rgba(0,255,255,.2)}.super-button:hover .arrow{transform:translateX(6px)}.arrow{width:22px;height:22px;transition:transform .3s ease-in-out;color:#00ffff}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.card1{position:relative;width:190px;height:254px;background-color:#5b3c8a;display:flex;flex-direction:column;justify-content:end;padding:12px;gap:12px;border-radius:8px;cursor:pointer;color:white;border:2px solid transparent;background-clip:padding-box}.card1:before{inset:-2px;border-radius:10px;background:linear-gradient(-45deg,#e81cff,#40c9ff);transition:all .6s cubic-bezier(.175,.885,.32,1.275)}.card1:after,.card1:before{content:"";position:absolute;z-index:-1;pointer-events:none}.card1:after{inset:0;border-radius:8px;background:linear-gradient(135deg,#1a0b2e,#2d1b69 50%,#1a0b2e),radial-gradient(circle at 25% 25%,#40c9ff11 1px,transparent 0),radial-gradient(circle at 75% 75%,#e81cff11 1px,transparent 0);background-size:100% 100%,20px 20px,30px 30px;animation:floatParticles 8s ease-in-out infinite}@keyframes floatParticles{0%,to{background-position:0 0,0 0,0 0;opacity:.8}50%{background-position:0 0,20px 20px,-30px 30px;opacity:1}}.card1:hover:after{animation-duration:4s}.heading{font-size:50px;text-transform:capitalize;font-weight:700;transform:translateY(-40px);color:#40c9ff}.card1 p:not(.heading){font-size:14px}.card1 p:last-child{color:#e81cff;font-weight:600;font-size:15px}.card1:hover:before{transform:rotate(-5deg) scale(1.02)}.button4{font-size:1.2em;padding:.1em .2em;height:40px;width:10rem;border-radius:.5em;border:none;background:linear-gradient(90deg,#f441a5,#03a9f4);color:#fff;cursor:pointer;box-shadow:2px 2px 3px #000000b4}.container4{position:relative;padding:3px;background:linear-gradient(180deg,#f441a5,#03a9f4,);border-radius:.9em;transition:all .4s ease}.container4:before{content:"";position:absolute;inset:0;margin:auto;border-radius:.9em;z-index:-10;filter:blur(0);transition:filter .4s ease}.container4:hover:before{background:linear-gradient(90deg,#03a9f4,#f441a5);filter:blur(1.2em)}.container4:active:before{filter:blur(.2em)}