*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{color:#ededed;background:#081b29}.header{position:fixed;top:0;left:0;width:100%;padding:20px 10%;background:#051129;display:flex;justify-content:space-between;align-items:center;z-index:100}.logo{position:relative;font-size:25px;color:#fff;text-decoration:none;font-weight:600;cursor:default;opacity:0;animation:slideRight 1s ease forwards}.navbar a{display:inline-block;font-size:25px;color:#fff;text-decoration:none;font-weight:500;margin-left:35px;transition:.3s;opacity:0;animation:slideTop .5s ease forwards;animation-delay:calc(.2s * var(--i))}.navbar a:hover{color:#0ef}.hamburger{display:none;cursor:pointer}.home{display:flex;justify-content:center;align-items:center;gap:2%;height:100vh}.img{border-radius:50%;display:none;box-shadow:0 0 5px #0ff,0 0 25px #bde53a,0 0 50px #9e389b,0 0 100px #0ff}.hambar{display:block;width:25px;height:3px;margin:5px auto;transition:all .3s ease-in-out;background-color:#fff}.home{position:relative;width:100%;justify-content:space-between;height:100vh;background-size:cover;background-position:center;display:flex;align-items:center;padding:70px 10% 0}.home-content{max-width:600px}.home-content h3{font-size:32px;font-weight:700;opacity:0;animation:slideBottom 1s ease forwards;animation-delay:.7s}.home-content h3:nth-of-type(2){margin-bottom:30px;animation:slideTop 1s ease forwards;animation-delay:.7s}.home-content h3 span{color:#0ef}.home-content h1{font-size:56px;font-weight:700;margin:-3px 0;opacity:0;animation:slideRight 1s ease forwards;animation-delay:1s}.home-content p{font-size:20px;opacity:0;animation:slideLeft 1s ease forwards;animation-delay:1s}.home-sci a{display:inline-flex;justify-content:center;align-items:center;width:40px;height:40px;background:transparent;border:2px solid #0ef;border-radius:50%;font-size:20px;color:#0ef;text-decoration:none;transition:.5s ease;opacity:0;animation:slideLeft 1s ease forwards;animation-delay:calc(.2s * var(--i));margin:30px 15px 30px 0}.home-sci a:hover{background:#0ef;color:#081b29;box-shadow:0 0 20px #0ef}.btn-box{display:inline-block;padding:12px 28px;background:#0ef;border-radius:40px;font-size:16px;color:#081b29;letter-spacing:1px;text-decoration:none;font-weight:600;opacity:0;animation:slideTop 1s ease forwards;animation-delay:2s;box-shadow:0 0 5px #0ff,0 0 25px #0ff}.btn-box:hover{box-shadow:0 0 5px #0ff,0 0 25px #0ff,0 0 50px #0ff,0 0 100px #0ff,0 0 200px #0ff}.about{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;gap:1.5rem;margin:4%}.about-img img{width:100%;height:auto;padding-bottom:4%;max-width:630px;border-radius:8px}.about-text h2{font-size:60px}.about-text h2 span{color:#0ef}.about-text h4{font-size:29px;font-weight:600;color:#fff;line-height:1.7;margin:15px 0 30px}.about-text p{color:#f0f8ff;font-size:24px;line-height:1.4;margin-bottom:4rem;text-align:justify}.skills{display:flex;justify-content:center;gap:2%}.technical-bars{display:flex;flex-wrap:wrap;justify-content:space-evenly;gap:2%}.skill-set-1,.skill-set-2{width:45%}.professionals{width:30%}.technicals{width:60%}#services{color:#f0f8ff;font-size:20px;line-height:1.4;margin-bottom:4rem}.sub-title{text-align:center;font-size:60px;padding-bottom:70px;margin-top:50px;padding-top:100px}.sub-title span{color:#0ef}.container{padding:10%}.services-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(259px,1fr));grid-gap:40px;margin-top:50px}.services-list div{background-color:transparent;padding:40px;font-size:13px;font-weight:600;border-right:10px;border-radius:20px;transition:background .5s,transform .5s;box-shadow:1px 1px 20px #012290f7,1px 1px 40px #0053b8f7}.services-list div i{font-size:50px;margin-bottom:30px}.services-list div h2{font-size:30px;font-weight:500;margin-bottom:15px}.services-list div a{text-decoration:none;color:#000;font-size:12px;margin-top:20px;display:inline-block}.read{display:inline-block;padding:12px 20px;background:#0ef;border-radius:40px;font-size:16px;color:#081b29;letter-spacing:1px;text-decoration:none;font-weight:600;opacity:0;animation:slideTop 1s ease forwards;animation-delay:2s;box-shadow:0 0 5px #0ff,0 0 25px #0ff}.read:hover{box-shadow:0 0 5px #0ff,0 0 25px #0ff,0 0 50px #0ff,0 0 100px #0ff,0 0 200px #0ff}.services-list div:hover{transform:translateY(-10px)}section{display:flex;flex-wrap:wrap}#portfolio{min-height:100vh}.heading1{text-align:center;text-decoration:underline;text-underline-offset:10px;text-decoration-thickness:5px;margin-bottom:50px}.bar{font-size:23px;margin-bottom:23px}.technical-bars .bar{margin-top:40px 0}.technical-bars .bar:first-child{margin-top:0}.technical-bars .bar:last-child{margin-bottom:0}.technical-bars .bar .info{margin-bottom:5px}.technical-bars .bar .info span{font-size:17px;font-weight:500;animation:showText .5s 1s linear forwards;opacity:0}.technical-bars .bar .progress-line{position:relative;border-radius:10px;width:100%;height:5px;background-color:#000;animation:animate 1s cubic-bezier(1,0,.5,1) forwards;transform:scaleX(0);transform-origin:left}@keyframes animate{to{transform:scaleX(1)}}.technical-bars .bar .progress-line span{height:100%;background-color:#0ef;position:absolute;border-radius:10px;animation:animate 1s 1s cubic-bezier(1,0,.5,1) forwards;transform:scaleX(0);transform-origin:left}.progress-line span{width:var(--j)}.progress-line span:after{position:absolute;padding:1px 8px;background-color:#000;color:#fff;font-size:12px;border-radius:3px;top:-28px;right:-20px;animation:showText .5s 1.5s ease forwards;opacity:0}.progress-line.css span:after{content:"90%"}.progress-line.JavaScript span:after{content:"80%"}.progress-line.Clanguage span:after{content:"80%"}.progress-line.Cpluslanguage span:after{content:"90%"}.progress-line.react span:after{content:"90%"}.progress-line.html span:after{content:"90%"}.progress-line.nodejs span:after{content:"80%"}.progress-line.redux span:after{content:"60%"}.progress-line.sql span:after{content:"70%"}.progress-line.mongodb span:after{content:"50%"}.progress-line.sass span:after{content:"70%"}.progress-line.linux span:after{content:"70%"}.progress-line.bootstrap span:after{content:"60%"}.progress-line.git span:after{content:"80%"}.progress-line span:before{content:"";position:absolute;width:0;height:0;border:7px solid transparent;border-bottom-width:0px;border-right-width:0px;border-top-color:#000;top:-10px;right:0;animation:showText .5s 1.5s linear forwards;opacity:0}@keyframes showText{to{opacity:1}}.radial-bars{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:space-evenly;align-items:center}.radial-bars .radial-bar{width:50%;height:170px;margin-bottom:10px;position:relative}.radial-bars .radial-bar svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);width:120px;height:160px}.radial-bars .radial-bar .progress-bar{stroke-width:10;stop-color:#000;fill:transparent;stroke-dasharray:502;stroke-dashoffset:502;stroke-linecap:round;animation:animate-bar 1s linear forwards}.path{stroke-width:10;stroke:#0ef;fill:transparent;stroke-dasharray:502;stroke-dashoffset:502;stroke-linecap:round}.path-1{animation:animate-path1 1s 1s linear forwards}.path-2{animation:animate-path2 1s 1s linear forwards}.path-3{animation:animate-path3 1s 1s linear forwards}.path-4{animation:animate-path4 1s 1s linear forwards}@keyframes animate-path1{to{stroke-dashoffset:50}}.radial-bar .percentage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:17px;font-weight:500;animation:showText .5s 1s ease forwards;opacity:0}.radial-bar .text{width:100%;position:absolute;text-align:center;left:50%;bottom:-5px;transform:translate(-50px);font-size:17px;font-weight:500;animation:showText .5s 1s linear forwards}.main-text{padding-top:75px;margin-top:75px}.main-text h2{font-size:45px;line-height:1;text-align:center;margin-bottom:40px}.main-text h2 span{color:#0ef}.portfolio-content{display:flex;justify-content:center;flex-wrap:wrap;gap:2%}.row{width:30%;margin-bottom:30px}.row{position:relative;overflow:hidden;border-radius:8px;cursor:pointer;scrollbar-width:none}.row img{width:100%;border-radius:8px;display:block;height:400px;transition:transform .5s}.layer{width:100%;height:0;background:linear-gradient(#0000001a,#0ef);position:absolute;border-radius:8px;left:0;bottom:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 40px;transition:height .5s}.layer h5{color:#000;font-size:20px;font-weight:600;margin-bottom:15px}.layer p{color:#000;font-size:1rem;line-height:1.8;overflow:scroll}.row .layer p::-webkit-scrollbar{display:none}.layer i{color:#ff004f;margin-top:20px;font-size:20px;background:#111;width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%}.row:hover img{transform:scale(1.1)}.row:hover .layer{height:100%;padding-top:15px}.button-grp{display:flex;gap:5px}.contact{display:flex;flex-wrap:wrap;align-items:flex-start;gap:3rem;padding:0 30px;justify-content:space-between;min-height:100vh}.contact-text,.contact-form{width:45%}.contact-text h2{font-size:45px;line-height:1;text-align:center}.contact-text h2 span{color:#0ef}.contact-text h4{margin:15px 0;color:#e4e4e4;font-size:20px;font-weight:600px}.contact-text p{color:#b1b1b1;font-size:20px;line-height:30px;margin-bottom:2rem}.contact-list{margin-bottom:3rem}.contact-list li{margin-bottom:10px;display:block}.contact-list i{display:inline-block;color:#0ef;font-size:20px;font-weight:600;transition:all .4s ease}.contact-list .contact-list li a:hover{transform:scale(1.01) translateY(-5px);color:#0ef}.contact-mail{text-decoration:none;color:#fff;font-size:20px}.contact-mail:hover{color:#0ef}.contact-icons i{display:inline-flex;justify-content:center;align-items:center;width:40px;height:40px;background:transparent;border:2px solid #0ef;border-radius:50%;font-size:20px;color:#0ef;text-decoration:none;margin:30px 15px 30px 0;transition:.5s ease;opacity:0;animation:slideLeft 1s ease forwards;animation-delay:calc(.2s * var(--i))}.contact-icons i:hover{background:#0ef;color:#000;box-shadow:0 0 20px #0ef}.contact-form form{position:relative}.contact-form form input,form textarea{border:none;outline:none;width:90%;padding:18px;background:#555557;color:#000;font-size:1rem;font-weight:600;margin-bottom:.5rem;border-radius:.5rem}.contact-form textarea{resize:none;height:220px}.contact-form form .send{display:inline-block;padding:14px 60px;background:#0ef;border-radius:40px;font-size:18px;color:#081b29;letter-spacing:1px;text-decoration:none;font-weight:600;opacity:0;animation:slideTop 1s ease forwards;animation-delay:2s;box-shadow:0 0 5px #0ff,0 0 25px #0ff}.contact-form form .send:hover{box-shadow:0 0 5px #0ff,0 0 25px #0ff,0 0 50px #0ff,0 0 100px #0ff,0 0 200px #0ff}.contact-form form input[type=text]:hover,textarea:hover,input[type=email]:hover{background-color:#f2f2f2;color:#0c04f1}@keyframes animate-path2{to{stroke-dashoffset:175}}@keyframes animate-path3{to{stroke-dashoffset:125}}@keyframes animate-path4{to{stroke-dashoffset:75}}@keyframes animate-bar{to{stroke-dashoffset:-1}}@keyframes slideRight{0%{transform:translate(-100px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideTop{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideBottom{0%{transform:translateY(-100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideLeft{0%{transform:translate(100px);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width:868px){.hamburger{display:block}.hamburger.active .hambar:nth-child(2){opacity:0}.hamburger.active .hambar:nth-child(1){transform:translateY(8px) rotate(45deg)}.hamburger.active .hambar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.navbar{position:fixed;left:-100%;top:70px;display:flex;flex-direction:column;background-color:#051129;gap:0;width:100%;text-align:center;transition:.3s}.nav-item{margin:16px 0}.navbar.active{left:0}.home{min-height:100vh}.contact{flex-direction:column;text-align:center;align-items:center;justify-content:center}.contact-text,.contact-form{width:100%}.skills{flex-direction:column;align-items:center;justify-content:center;gap:4rem}.technicals,.professionals{width:100%}.radial-bars{flex-direction:row;justify-content:space-between}.radial-bar{width:45%}.radial-bar .text{width:auto}.portfolio-content{flex-direction:column;gap:2rem;align-items:center}.row{width:80%}.row .layer p{overflow:scroll}.row .layer p::-webkit-scrollbar{display:none}.row .layer i{background-color:#000}.about{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center}.about-text p{font-size:17px;line-height:1.2;text-align:justify;text-decoration-color:#000;color:#f5fffa}.about-text{padding:2%}.layer p{line-height:1.3}}@media (min-width:1450px){.img{display:block}}