*{padding:0;margin:0;box-sizing:border-box;list-style:none;scroll-behavior:smooth;text-decoration:none;color:var(--text-color)}:root{--text-color:#f5f5f5;--hover-color:#12f7ff;--secon-bg-color:#292e33;--bg-color:#250221;--big-font:2.5rem;--norma-font:2rem;--neon-box-shadow:0 0 0.5rem #12f7ff;--h2-font:3rem;--font-neon-text-shadow:0 0 10px rgba(18,247,255,.3),0 0 20px rgba(18,247,255,.3),0 0 30px rgba(18,247,255,.3),0 0 40px rgba(18,247,255,.3),0 0 70px rgba(18,247,255,.3),0 0 80px rgba(18,247,255,.3),0 0 100px rgba(18,247,255,.3),0 0 150px rgba(18,247,255,.3)}::-webkit-scrollbar{height:0;width:.5rem}::-webkit-scrollbar-track{background:var(--secon-bg-color)}::-webkit-scrollbar-thumb{background:var(--hover-color);border-radius:5rem}body{font-family:Poppins,sans-serif;background-color:var(--bg-color);color:var(--bg-color)}.navbar{position:fixed;top:0;left:0;z-index:1000;background:var(--bg-color);border-bottom:1px solid transparent;display:flex;color:#dadada;align-items:center;justify-content:space-between;width:100%;padding:20px 10%}.logo{font-size:26px;font-weight:700;letter-spacing:1px}span{color:var(--hover-color)}.navlist{display:flex}.navlist a{display:inline-block;color:#fff;font-weight:500;padding:10px 20px;text-shadow:var(--neon-box-shadow);animation:slideAnimation 1s ease forwards;animation-delay:calc(.3s *var(--i))}.navlist a:active,.navlist a:hover{color:var(--hover-color)}.navlist a:hover{text-shadow:0 0 10px rgba(18,247,255,.6),0 0 20px rgba(18,247,255,.6),0 0 30px rgba(18,247,255,.6),0 0 40px rgba(18,247,255,.6),0 0 70px rgba(18,247,255,.6),0 0 80px rgba(18,247,255,.6),0 0 100px rgba(18,247,255,.6),0 0 150px rgba(18,247,255,.6)}.menu-icon{font-size:1.8rem;z-index:10001;cursor:pointer;margin-left:25px;background:var(--hover-color);border-radius:3px;color:#250221;display:none!important}.hom{color:var(--text-color)}section{padding:100px}.home{min-height:100vh;height:100%;width:100%;display:grid;grid-template-columns:repeat(2,1fr);align-items:center;grid-gap:4em}.image{height:100%;width:auto;filter:drop-shadow(0 0 10px rgba(56,185,218,.6)) drop-shadow(0 0 20px rgba(5,50,68,.6)) drop-shadow(0 0 30px rgba(5,68,63,.6)) drop-shadow(0 0 70px rgba(77,3,77,.6)) drop-shadow(0 0 70px rgba(3,54,77,.6));mix-blend-mode:lighten}.home-content{max-width:600px}.home-content h1{font-size:var(--big-font);font-weight:700}.change-text{font-size:1.5rem;font-weight:700}.change-text h3{display:inline-flex;margin:0;vertical-align:top}.change-text h3 .word{position:absolute;display:flex;opacity:0}.change-text h3 .word .letter{transform-origin:center center 25px}.change-text h3 .word .letter.out{transform:rotate(90deg);transition:.32s cubic-bezier(.6,0,.7,.2)}.change-text h3 .word .letter.in{transition:.38s ease}.change-text h3 .word .letter.behind{transform:rotate(-90deg)}.home-content p{color:#bdbdbd;line-height:1.6}.info-box{display:inline-flex;justify-content:space-between;align-items:center;width:300px;margin:1rem 0 2rem}.info-box h5{font-weight:600;color:var(--text-color);font-size:1rem}.info-box span{font-size:.9rem;color:#bdbd}.btn-box{display:flex;justify-content:space-between;width:320px;height:45px}.btn-box .btn{display:inline-flex;justify-content:center;align-items:center;width:150px;height:100%;font-size:1rem;background:var(--hover-color);color:var(--bg-color);letter-spacing:1px;font-weight:600;transition:.6s;box-shadow:var(--neon-box-shadow);border-radius:5px;position:relative;overflow:hidden;z-index:1;border:2px solid var(--hover-color)}.btn:hover{color:var(--hover-color)}.btn:before{content:"";position:absolute;top:0;left:0;background:var(--bg-color);width:0;height:100%;z-index:-1;transition:.4s}.btn:hover:before{width:100%}.btn:nth-child(2){background:var(--bg-color);color:var(--hover-color)}a.btn:nth-child(2):hover{color:var(--bg-color)}.btn:nth-child(2):before{background:var(--hover-color)}.social-icons{margin-top:2rem;display:flex;justify-content:space-between;width:260px;height:40px}.social-icons a{display:inline-flex;margin-left:.4vw;width:50px;height:100%;justify-content:center;align-items:center;background:var(--bg-color);color:var(--hover-color);border:2px solid var(--hover-color);transition:.6s;box-shadow:0 0 .3rem #12f7ff;border-radius:5px;position:relative;z-index:1;overflow:hidden}.social-icons a i{font-size:1.5rem;color:var(--hover-color);display:grid;grid-gap:4rem}.social-icons a i:hover{color:var(--bg-color)}.social-icons a:before{content:"";position:absolute;left:0;top:0;width:0;height:100%;background:var(--hover-color);transition:.6s;z-index:-1}.social-icons a:hover:before{width:100%}.home-image{position:relative}.image-box,.image-box img{height:100%;width:100%}.image-box img{max-width:100%;align-items:center}.about{display:flex;justify-content:center;align-items:center;grid-gap:2em;background:var(--bg-color)}.about .img-about{text-align:center;position:relative}.about .img-about .img{max-width:500px;height:auto;filter:drop-shadow(0 0 10px rgba(56,185,218,.6)) drop-shadow(0 0 20px rgba(5,50,68,.6)) drop-shadow(0 0 30px rgba(5,68,63,.6)) drop-shadow(0 0 70px rgba(77,3,77,.6)) drop-shadow(0 0 70px rgba(3,54,77,.6));mix-blend-mode:lighten}.about-content span{color:#fdfdfd;font-size:.8rem;font-weight:200;letter-spacing:2px;text-transform:uppercase}.about-content h2{color:var(--hover-color);font-weight:700;font-size:var(--norma-font)}.about-content h3{font-weight:600;font-size:2rem;margin-bottom:.2rem}.about-content p{color:#fdfdfd;font-weight:300;margin-bottom:2rem;font-size:1.25vw}.info-about1,.info-about2,.info-about3{background:var(--bg-color);font-size:.8rem;position:absolute;padding:10px;width:90px;height:90px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:var(--neon-box-shadow);border:1px solid var(--hover-color);outline:2px solid var(--bg-color);animation:morph 6s linear infinite;text-align:center}.info-about1{right:10%;top:34%}.info-about2{right:66%;top:15%}.info-about3{right:61%;top:70%}.img-about span{color:var(--hover-color);font-size:1rem;font-weight:600}.main-text{width:100%;text-align:center;margin-bottom:2rem;color:var(--hover-color)}.main-text h2{font-weight:700;font-size:var(--norma-font)}.main-text span{color:#fdfdfd;font-size:.8rem;font-weight:200;letter-spacing:2px;text-transform:uppercase}.services-section{display:flex;justify-content:center;flex-wrap:wrap;grid-gap:2rem}.services-section .service-box{flex:1 1 18rem;padding:2rem 1rem;text-align:center;background:#343335;transition:transform .4s;border-radius:10px}.service-btn{width:auto;justify-content:center}.services-section .service-box:hover{transform:scale(1.05)}.servoice-icon{border:2px solid var(--hover-color);padding:2rem;background:var(--bg-color);display:flex;align-items:center;font-size:3rem;border-radius:50%;position:relative;color:var(--hover-color);box-shadow:var(--neon-box-shadow);outline:3px solid var(--bg-color)}.service-box h3{margin-top:10px;font-size:1.5rem}.service-box p{margin:.5rem 0 1.5rem;font-weight:300;letter-spacing:1px;color:#bdbdbd;line-height:1.6}.skills{background:#250221}.skill-main{width:100%;display:grid;grid-template-columns:repeat(2,1fr);grid-row-gap:30px;grid-column-gap:50px;align-items:center}.skill-bar{margin-bottom:2.3rem}.skill-main h3{margin-bottom:2rem;font-size:var(--norma-font);text-align:center}.left-skill .skill-bar .info{display:flex;justify-content:space-between;align-items:center;padding:0 10px}.left-skill .skill-bar .bar{width:100%;height:10px;background:var(--bg-color);outline:2px solid #12f7ff;border-radius:25px;margin-top:6px;position:relative}.left-skill .skill-bar .bar span{width:50%;height:100%;position:absolute;left:0;background:var(--hover-color);border-radius:25px;box-shadow:var(--neon-box-shadow)}.left-skill .skill-bar .bar .javascrip{width:80%;animation:javascript 1.5s}.left-skill .skill-bar .bar .typescrip{width:90%;animation:typescrip 1.8s}.left-skill .skill-bar .bar .html{width:75%;animation:html 1.6s}.left-skill .skill-bar .bar .css{width:72%;animation:css 1.7s}.left-skill .skill-bar .bar .nodejs{width:60%;animation:nodejs 1.4s}.left-skill .skill-bar .bar .nextjs{width:70%;animation:nextjs 1.6s}.left-skill .skill-bar .bar .tailwindcss{width:75%;animation:tailwindcss 1.3s}.left-skill .skill-bar .bar .figma{width:55%;animation:figma 1.2s}.right-skill{padding:2rem;width:100%;max-width:1200px;margin:0 auto}.right-skill h3{text-align:center;font-size:2rem;margin-bottom:2rem;color:var(--primary-color)}.professional-skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:2rem;gap:2rem;justify-items:center}.skill-box{background:hsla(0,0%,100%,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem;border-radius:20px;width:100%;max-width:220px;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 8px 32px rgba(31,38,135,.15);border:1px solid hsla(0,0%,100%,.1)}.skill-box:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(31,38,135,.25)}.skill-circle{width:120px;height:120px;margin:0 auto 1.5rem;border:6px solid var(--bg-color);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(180deg,var(--bg-color) 0 var(--level),#12f7ff var(--level) 100%);outline:2px solid #12f7ff;box-shadow:0 0 15px rgba(18,247,255,.3);animation:popIn 1.5s ease-in-out}.skill-circle:before{content:"";position:absolute;width:calc(100% + 20px);height:calc(100% + 20px);border-radius:50%;background:radial-gradient(circle at center,rgba(18,247,255,.1) 0,transparent 70%);z-index:-1}.skill-circle span{font-size:1.25rem;font-weight:700;color:var(--primary-color);text-shadow:0 0 10px rgba(18,247,255,.5)}.skill-box p{text-align:center;font-size:1.1rem;font-weight:600;color:var(--primary-color);margin-top:1rem}.filter-buttons{margin:2rem;text-align:center}.filter-buttons .btn{all:unset;background:none;outline:none;border:none;cursor:pointer;font-size:.85rem;font-weight:600;letter-spacing:.4px;margin-left:1.3rem;color:var(--text-color);margin-bottom:2rem}.filter-buttons .btn:hover{color:var(--hover-color)}.projects-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));grid-gap:2rem;gap:2rem}.proj-box{position:relative;border-radius:15px;overflow:hidden;background:#292e33;grid-template-rows:1fr auto;border:2px solid var(--hover-color );box-shadow:var(--neon-box-shadow)}.proj-box,.proj-img{display:flex;align-items:center}.proj-img{justify-content:center;height:100%;width:100%}.proj-img img{opacity:.5s}.pro-content,.proj-img img{width:100%;height:100%;transition:.5s}.pro-content{position:absolute;bottom:0;left:0;opacity:0;background:linear-gradient(rgba(0,0,0,.2),#12f7ff);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:.2rem}.proj-box:hover .pro-content{opacity:1}.proj-box:hover .proj-img{transform:scale(1.1)}.pro-content h3{font-size:1.5rem;font-weight:600}.pro-content p{font-size:.8rem;margin:5px 0 15px}.pro-content a{background:#fff;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;width:50px;height:50px;border:1px solid var(--hover-color);outline:2px solid #fff}.pro-content a i{color:var(--bg-color);font-size:1.3rem}.main-text h2{color:var(--hover-color)}.contant{background:#292e33;width:100%}.contant form{text-align:center;max-width:50rem;margin:1rem auto 3rem}.contant form input,.contant form textarea{width:100%;color:var(--text-color);background:var(--bg-color);margin-bottom:.8rem;border:none;border-radius:5px;padding:.7rem}.contant form textarea{resize:none}.formBtn{display:flex;justify-content:center;width:100%}.formBtn .btn{cursor:pointer;font-size:1rem}footer{justify-content:space-between}footer a i{width:2vw;display:inline-flex;text-align:center}footer{padding:1.5rem 8%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--bg-color)}footer p{color:#bdbdbd;text-align:center;margin-bottom:1rem}footer .social-icons{display:flex;justify-content:center;margin-top:1rem;flex-wrap:wrap}footer a{margin:0 10px}footer a i{font-size:large;height:4vh;width:4vh;display:flex;justify-content:center;align-items:center;color:var(--text-color);background:var(--hover-color);padding:0;margin:0}.scroll-scale{opacity:1;transform:scale(.9);transition:all 2s}.scroll-bottom{opacity:0;transform:translateY(300px);transition:3s}.scroll-top{opacity:0;transform:translateY(-300px);transition:3s}.show-items{opacity:1;transform:translateX(0)}@keyframes morph{0%,to{border-radius:40% 60% 70% 30%/40% 40% 60% 50%}30%{border-radius:70% 30% 50% 50%/30% 30% 70% 70%}60%{border-radius:100% 60% 60% 100%/100% 100% 60% 60%}80%{border-radius:65% 31% 66% 34%/21% 30% 70% 79%}}@keyframes javascript{0%{width:0}to{width:80%}}@keyframes typescrip{0%{width:0}to{width:90%}}@keyframes html{0%{width:0}to{width:75%}}@keyframes css{0%{width:0}to{width:72%}}@keyframes nodejs{0%{width:0}to{width:60%}}@keyframes nextjs{0%{width:0}to{width:70%}}@keyframes tailwindcss{0%{width:0}to{width:75%}}@keyframes figma{0%{width:0}to{width:55%}}@keyframes popIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes glow{0%{background:var(--bg-color);box-shadow:none}to{background:var(--hover-color);box-shadow:var(--neon-box-shadow)}}@keyframes slideAnimation{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.professional-skills{gap:1.5rem}.skill-box{padding:1.5rem;max-width:180px}.skill-circle{width:100px;height:100px}.skill-box p,.skill-circle span{font-size:1rem}}@media (max-width:480px){.right-skill{padding:1rem}.professional-skills{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.skill-box{padding:1rem;max-width:150px}.skill-circle{width:80px;height:80px;border-width:4px}}@media(max-width:991px){.navbar,footer{padding:15px 5%}section{padding:50px 5%}.navlist a{padding:8px 15px}:root{--big-font:2.2rem;--norma-font:1.8rem;--neon-box-shadow:0 0 .8rem #12f7ff;--h2-font:3rem}.home-content{margin-top:5rem}.social-icons{margin-top:2rem}}@media (max-width:768px){.menu-icon{display:block!important;align-items:center;justify-content:center;transition:all .4s ease}.menu-icon .navlist{display:none;flex-direction:column;position:absolute;top:-1000%;left:0;width:100%;padding:0 5%;background:rgba(37,2,33,.8);border-top:1px solid hsla(0,0%,100%,.1);text-align:center;gap:1rem;transform:translateY(-100%);opacity:0;pointer-events:none;transition:all .3s ease}.navlist.open{display:flex;transform:translateY(0);opacity:1;pointer-events:auto}.navlist a{padding-bottom:1rem;font-size:1rem}.navlist.open{top:100%}@media (max-width:991px){.navbar{padding:15px 5%}section{padding:50px 5%}}@media (max-width:768px){.menu-icon{display:block!important;padding-left:4px;padding-right:4px}.btn-box{flex-direction:row}}@media (max-width:480px){.home-content p{font-size:.9rem}.social-icons{flex-direction:column;align-items:center}.home{grid-template-columns:1fr}.home-image{margin-bottom:1rem;height:100%}.about{flex-direction:column-reverse}.about .img-about{height:50%}.skill-main{grid-template-columns:1fr}.skill-main .professional-skills{grid-template-columns:repeat(2,1fr);gap:1.5rem}.filter-buttons{margin:2.5rem 0}footer p{font-size:.8 rem}.home-content h1{font-size:var(--norma-font)}}}@media (max-width:420px){html{font-size:80%}footer p{font-size:.6rem}.filter-buttons .btn{font-size:.8rem}.img-about img{width:250px}.info-about1 .info-about2 .info-about3{display:none}.img-about p{font-size:1rem}}@media (max-width:820px){.skill-main{grid-template-columns:1fr}.skill-main .professional-skills{grid-template-columns:repeat(2,1fr);gap:1.5rem}.home{margin-top:0}.home-image{height:45%;width:auto}.about{flex-direction:column-reverse}.about .img-about{height:50%}}@media (max-width:768px){footer{padding:1rem 5%;flex-direction:column;align-items:center;justify-content:center}footer p{font-size:.9rem;margin-bottom:.5rem}footer .social-icons{flex-direction:row;justify-content:center;margin-top:.5rem}footer a{margin:0 5px;font-size:1.2rem}}@media (max-width:480px){footer p{font-size:.8rem;margin-bottom:.3rem}footer a i{font-size:medium;height:auto;width:auto}}@media (max-width:768px){.about{flex-direction:column;text-align:center}.about,.about .img-about{justify-content:center;align-items:center}.about .img-about{width:80%;margin-bottom:2rem;display:flex}.about .img-about .img{width:100%;height:auto;max-width:400px;filter:drop-shadow(0 0 10px rgba(56,185,218,.6)) drop-shadow(0 0 20px rgba(5,50,68,.6)) drop-shadow(0 0 30px rgba(5,68,63,.6)) drop-shadow(0 0 70px rgba(77,3,77,.6)) drop-shadow(0 0 70px rgba(3,54,77,.6));mix-blend-mode:lighten}.about-content h2{font-size:1.5rem}.about-content p{font-size:1.2rem;margin-bottom:1.5rem}.info-about1,.info-about2,.info-about3{width:70px;height:70px;font-size:.8rem}.about-content button{margin-top:20px;padding:10px 20px;font-size:1.2rem;display:inline-block;margin-left:auto;margin-right:auto}}@media (max-width:480px){.about{flex-direction:column;text-align:center}.about,.about .img-about{justify-content:center;align-items:center}.about .img-about{width:100%;margin-bottom:2rem;display:flex}.about .img-about .img{width:100%;height:auto;max-width:320px;filter:drop-shadow(0 0 10px rgba(56,185,218,.6)) drop-shadow(0 0 20px rgba(5,50,68,.6)) drop-shadow(0 0 30px rgba(5,68,63,.6)) drop-shadow(0 0 70px rgba(77,3,77,.6)) drop-shadow(0 0 70px rgba(3,54,77,.6));mix-blend-mode:lighten}.about-content h2{font-size:1.3rem}.about-content p{font-size:1rem;margin-bottom:1.2rem;line-height:1.6}.info-about1,.info-about2,.info-about3{width:60px;height:60px;font-size:.7rem}.about-content button{margin-top:20px;padding:8px 18px;font-size:1.1rem;display:inline-block;margin-left:auto;margin-right:auto}}@media (max-width:991px){.navbar{padding:15px 5%}.navlist a{padding:8px 15px}.menu-icon{display:block}}@media (max-width:768px){.navlist{display:none;flex-direction:column;position:absolute;top:-1000%;left:0;width:100%;padding:0 5%;background:rgba(37,2,33,.8);border-top:1px solid hsla(0,0%,100%,.1);text-align:center;gap:1rem;transform:translateY(-100%);opacity:0;pointer-events:none;transition:all .3s ease}.navlist.open{display:flex;transform:translateY(0);opacity:1;pointer-events:auto}.navlist a{display:block;padding-bottom:1rem;font-size:1rem}.navlist.open{top:100%}}@media (max-width:480px){.navbar{padding:12px 5%}.navlist a{padding:6px 10px;font-size:.9rem}.logo{font-size:20px}}