@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap";@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap";:root{--primaryBg: #2b323c;--highlightColor: #ff6464;--secondaryBg: #282c34;--highlightBg: #0080cf;--primaryColor: #fff;--hdr-height: 56px;--sec-height: calc(100vh - var(--hdr-height))}*{margin:0;padding:0;box-sizing:border-box;list-style:none;text-decoration:none;font-family:Poppins,Lucida Sans,sans-serif}html{scroll-snap-type:y proximity;scroll-padding-top:var(--hdr-height);scroll-behavior:smooth}body{color:var(--primaryColor);background:var(--primaryBg)}.app{display:flex;flex-direction:column}#header{position:sticky;top:0;width:100%;background:var(--secondaryBg);z-index:10}.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px 50px}#logo{color:var(--primaryColor);font-family:Orbitron,Lucida Sans,sans-serif;font-size:1.6rem;letter-spacing:1px;font-weight:700;padding:2px 10px;cursor:pointer;letter-spacing:.5px;border-radius:8px}#logo:hover{background:linear-gradient(to right,var(--highlightColor),var(--highlightBg));-webkit-background-clip:text;background-clip:text;color:transparent}.navbar ul{display:flex;gap:1.5rem;justify-content:space-around;align-items:center}.navbar .link{position:relative;color:var(--primaryColor);text-decoration:none;font-size:1.2rem;cursor:pointer;letter-spacing:.5px}.navbar .link:hover{color:var(--highlightColor)}.navbar .link:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;border-radius:10px;background:var(--highlightColor);transform:scale(0);transform-origin:right;transition:transform .3s ease,background-color .3s ease .3s}.navbar .link:hover:before{transform:scale(1);transform-origin:left}.navbar .link.active{position:relative;color:var(--highlightColor)}.navbar .link.active:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;border-radius:10px;background:var(--highlightColor);transform:scale(1)}.move-top{position:absolute;top:calc(var(--sec-height));right:1rem;display:flex;justify-content:center;align-items:center;color:var(--highlightColor);font-size:1.5rem;padding:10px;border-radius:50px;overflow:hidden}.move-top:before{content:"";position:absolute;width:50px;height:150%;background:conic-gradient(var(--highlightColor),transparent 120deg);z-index:-1;animation:rotateBackward 2s linear infinite}.move-top:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(.9);background:var(--primaryBg);border-radius:50px;z-index:-1}.move-top:hover{animation:bounceUp 1.5s infinite ease-in-out}@keyframes bounceUp{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}section{min-height:var(--sec-height);scroll-snap-align:start}#home{display:flex;justify-content:space-evenly;align-items:center}.left{width:40%;display:flex;flex-direction:column;gap:2rem}.title{display:inline-block;font-size:3rem}.name{position:relative;color:var(--primaryBg);font-size:4rem;font-weight:800;white-space:nowrap;-webkit-text-stroke:1px var(--highlightBg);cursor:pointer;transition:transform 5s cubic-bezier(.8,.4,.8,1)}.name:before{content:attr(data-name);position:absolute;left:0;width:0;height:100%;background:linear-gradient(90deg,var(--highlightColor),var(--highlightBg));-webkit-background-clip:text;background-clip:text;color:transparent;border-right:2px solid var(--highlightBg);padding-right:2px;overflow:hidden;transition:width 1s ease,filter .5s ease}.name:hover:before{width:100%;-webkit-text-stroke-color:transparent;filter:drop-shadow(0 0 12px var(--highlightBg))}.sub-title{display:flex;gap:1rem;font-size:2rem}.static-txt{white-space:nowrap}.dynamic-txt{color:var(--highlightColor);font-weight:500;text-wrap:nowrap;cursor:pointer}#home .about{text-align:justify}#home .contacts{display:flex;gap:2rem}#home .contacts .btn{position:relative;display:flex;justify-content:space-around;align-items:center;gap:.5rem;width:2.7rem;height:2.7rem;border:2px solid var(--highlightColor);border-radius:999px;cursor:pointer;transition:width .5s ease,border .5s ease;overflow:hidden}#home .contacts .btn:before{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:var(--highlightColor);transition:width .5s ease,border .5s ease;z-index:-1}#home .contacts .btn:hover:before{width:100%;z-index:-1}#home .contacts .btn:hover{width:22.5%}#home .contacts .btn:hover a,#home .contacts .btn:hover a .icon{color:var(--primaryColor)}#home .contacts .btn a{color:var(--highlightColor);display:flex;justify-content:space-around;align-items:center;gap:.5rem;cursor:pointer;transition:width .5s ease}#home .contacts .btn a .icon{color:var(--highlightColor);font-size:1.2rem}#home .right{position:relative}#home .right div:first-child{position:relative;width:500px;aspect-ratio:1/1}.right .portfolio-image{position:absolute;width:380px;filter:brightness(1.001);z-index:2;top:1rem;left:3.2rem}@keyframes swing{0%,to{transform:translate(-20px)}50%{transform:translate(5px)}}#about h1{text-align:center;font-size:3rem;margin-top:10px}#about h1 span{color:var(--highlightColor)}#about .container{position:relative;top:1rem;display:flex;justify-content:space-evenly;align-items:center}#about .container .img-c{padding:1rem;background:linear-gradient(60deg,var(--highlightColor),var(--highlightBg));border-radius:100px;transition:border-radius .5s ease,transform .5s ease;cursor:pointer}#about .container .img-c img{width:300px}#about .container .img-c:hover{border-radius:20px;transform:scale(1.15)}#about .content{position:relative;width:55%;line-height:1.7}#about .about-txt{text-align:justify;margin-bottom:2rem}.education{display:flex;position:relative}.education .line{position:absolute;display:block;height:92%;width:3px;background:var(--highlightColor)}.education .dot{position:absolute;top:2.3rem;left:-6px;display:block;width:15px;aspect-ratio:1/1;border-radius:10px;background:var(--highlightColor);cursor:pointer}.education .dot:nth-child(1){top:9rem}.education .dot:nth-child(2){top:16rem}.education .dot:before{content:"";position:absolute;top:6px;left:10px;width:4rem;height:3px;background:var(--highlightColor)}.education .education-box{position:relative;margin-left:2rem}.ed-content{left:4rem;position:relative;background:var(--primaryBg);border:2px solid var(--highlightColor);border-radius:10px;margin-bottom:1.5rem;padding:10px 15px;overflow:hidden;transition:transform .5s ease}.ed-content:before{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:var(--secondaryBg);border-radius:10px;transition:width .5s ease;z-index:-1;overflow:hidden}.ed-content:hover:before{width:100%}.ed-content:hover{transform:translate(-8rem)}.ed-content .year{display:flex;justify-content:start;align-items:center;gap:1rem;margin-bottom:.5rem}.ed-details{white-space:nowrap}#skills .container{position:relative;display:flex;justify-content:center;align-items:center;gap:2rem;padding-top:2rem}#skills .skill-tabs{position:absolute;top:1rem;left:55%;display:flex;gap:1rem}#skills .skill-tabs li{position:relative;padding:5px 12px;border-radius:12px;cursor:pointer;overflow:hidden}#skills .skill-tabs li.active{color:var(--primaryColor);background:var(--highlightColor)}#skills .skill-tabs li:before{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:var(--highlightBg);z-index:-1;transition:width .5s ease}#skills .skill-tabs li:hover:before{width:100%}#skills .container .left{position:relative;width:35%}#skills .container .left>div{position:relative;font-size:2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;white-space:nowrap;width:100%;aspect-ratio:1/1}#skills .container .left>div .loader{position:absolute;top:10%;width:80%;aspect-ratio:1/1;background:conic-gradient(var(--highlightBg),transparent 180deg);border-radius:50%;z-index:-1;animation:rotateBackward 4s linear infinite}#skills .container .left>div .loader:before{content:"";position:absolute;background:var(--primaryBg);border-radius:50%;z-index:0;top:1.5rem;right:1.5rem;bottom:1.5rem;left:1.5rem}#skills .container .left>div .loader div{position:absolute;top:15%;left:15%;width:70%;aspect-ratio:1/1;background:conic-gradient(transparent 180deg,var(--highlightColor));border-radius:50%;z-index:2;animation:rotateForward 2s linear infinite}#skills .container .left>div .loader div:before{content:"";position:absolute;background:var(--primaryBg);border-radius:50%;z-index:0;top:1.5rem;right:1.5rem;bottom:1.5rem;left:1.5rem}@keyframes rotateBackward{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes rotateForward{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#skills .container .left>div .line1{font-weight:700}#skills .container .left div .line2{color:var(--primaryColor);font-family:Orbitron}.seperator{display:inline;width:5px;min-height:calc(var(--sec-height) - 10rem);background:var(--highlightColor)}#skills .skill-list{min-height:80vh;max-height:var(--sec-height);margin:2rem;display:grid;grid-template-columns:repeat(4,minmax(12rem,.5fr));align-items:center;justify-items:center}.skill-list li .skill-icon{width:100%;transform:scale(1.1)}.skill-list li{display:flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:50%;cursor:pointer;transition:filter .3s ease,transform .3s ease}.skill-list:has(li:hover) li{filter:grayscale(1)}.skill-list:has(li:hover) li:hover{filter:grayscale(0) brightness(1.5);transform:scale(1.4)}.skill-list li.category-skills{display:none}#projects .wrapper{position:relative}.project-tabs{position:absolute;top:calc(var(--sec-height) / 2);left:.5rem;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;justify-content:space-between;gap:.5rem}.project-tabs a{position:relative;color:var(--primaryColor);font-size:1.2rem;cursor:pointer;width:3rem;aspect-ratio:3/4;padding:1rem;border:2px solid rgba(255,255,255,.2);border-right:none;border-radius:15px 0 0 15px;display:flex;justify-content:center;align-items:center}.project-tabs a .circle{background:#fff3;position:absolute;margin-left:2px;width:20px;aspect-ratio:1/1;border-radius:50%;opacity:.8;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.project-tabs a.active{position:relative;font-weight:bolder;border:2px dashed var(--highlightColor);border-right:none}.project-tabs a.active:before{content:"";position:absolute;top:-2px;left:100%;width:3px;height:calc(100% + 4px);background:var(--primaryBg)}.project-tabs a.active .circle{position:absolute;width:25px;aspect-ratio:1/1;background:var(--highlightColor);opacity:.8;top:50%;left:50%;transform:translate(-50%,-50%);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);z-index:-1}.project-tabs a.active span{position:absolute;right:-2px;width:10px;aspect-ratio:1/1;background:transparent;border-width:2px;border-right-style:dashed;border-right-color:var(--highlightColor)}.project-tabs a.active .top-hc{top:-10px;border-bottom-right-radius:10px;border-bottom:dashed var(--highlightColor);box-shadow:2px 2px 0 2px var(--primaryBg)}.project-tabs a.active .bottom-hc{bottom:-10px;border-top-right-radius:10px;border-top:dashed var(--highlightColor);box-shadow:2px -2px 0 2px var(--primaryBg)}.project-list{width:100vw;display:flex;overflow:hidden}.project-list li{width:100%;height:var(--sec-height);display:none}.project-list li.active{display:block;position:relative;margin-left:3.5rem}.project-list .project{display:flex;align-items:center}.project .container{position:relative;width:calc(100% - 2rem);height:calc(var(--sec-height) - 5rem);border:2px dashed var(--highlightColor);border-radius:10px;padding:0 1rem;display:flex;justify-content:center;align-items:center;gap:4rem}.reverse-flex{flex-direction:row-reverse}.project .container .counter{position:absolute;top:-3.7rem;left:2rem;font-size:5rem;color:#fff9;background:var(--primaryBg)}.project .container .left{position:relative;top:1rem;width:44%}.project .container p{white-space:pre-line;text-align:justify}.project .container p:first-letter{font-family:Courier New,Courier,monospace;color:var(--highlightBg);font-size:3.5rem;font-weight:700;float:left;line-height:20px;padding-right:.5rem;margin-top:5px}.project .container .tech-div{display:flex;align-items:center;gap:2rem}.project .container .tech-div{white-space:nowrap;font-size:1.5rem;font-weight:700}.project .container li{display:inline;margin:0 1.5em 0 .5em}.project .container li span{width:3rem;cursor:pointer;transition:transform .3s ease}.project .container li span:hover{transform:scale(1.4)}.project .container li .express-icon{transform:scale(2.5);margin:1rem 0 .7rem 1rem;cursor:pointer;transition:transform .3s ease}.project .container li .express-icon:hover{transform:scale(3.3)}.project .container a{white-space:nowrap;position:relative;color:var(--primaryColor);display:inline-flex;align-items:center;justify-content:space-around;gap:.7rem;width:12rem;border-radius:10px;padding:5px 10px;margin-right:2rem}.project .container a:hover{color:var(--highlightBg);border-color:transparent;box-shadow:0 0 10px var(--highlightBg)}.project .container a span{display:flex;align-items:center}.project .container a span:first-of-type{font-size:1.2rem;color:var(--highlightBg)}.project .container a:hover span:first-of-type{color:var(--primaryColor)}.project .container .right{display:flex;flex-direction:column;align-items:center;gap:3rem}.project .container .title{position:relative;top:-1rem;padding:0 1rem;display:inline;white-space:nowrap;background:linear-gradient(to right,var(--highlightColor),var(--highlightBg));-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center}.project .container .title span{position:absolute;left:0;right:0;width:100%;height:100%;background:var(--primaryBg);border-radius:13px;z-index:-1}.project .container .title:before{content:"";position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border-radius:15px;background:conic-gradient(from var(--a),#00dbde,#fc00ff,red,#ff3333,var(--highlightColor),#4646ff,blue,#00dbde);animation:rotateColor 6s linear infinite;z-index:-2}.project .container .title:after{content:"";position:absolute;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px);border-radius:10px;background:conic-gradient(from var(--a),#00dbde,#fc00ff,red,#ff3333,var(--highlightColor),#4646ff,blue,#00dbde);filter:blur(5px);animation:rotateColor 6s linear infinite;z-index:-2}@property --a{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@keyframes rotateColor{0%{--a: 0deg }to{--a: 360deg }}.project .container .img-c{position:relative;width:38rem;border-radius:10px;display:flex;justify-content:center;align-items:center;box-shadow:0 0 15px var(--highlightBg)}.project .container .img-c img{object-fit:cover;width:100%;border-radius:10px}#contact{display:flex;justify-content:center;align-items:center}#contact .container form{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem;border-radius:15px}#contact .container h1{font-size:3rem;text-align:center}#contact .container h1 span{color:var(--highlightColor)}#contact .container form .form-container{display:grid;grid-template-columns:repeat(2,minmax(350px,1fr));grid-template-rows:repeat(2,25px);gap:1rem;row-gap:2rem}#contact .container form textarea{resize:none;width:100%;height:250px;margin-top:1rem}#contact .container form input{width:100%;height:40px}form :is(input,textarea){text-transform:lowercase;font-size:1.2rem;border-radius:7px;padding:10px;background:transparent;color:var(--primaryColor);border:2px solid var(--highlightBg)}form input[type=text]{text-transform:capitalize}form :is(input,textarea):focus{outline:var(--highlightBg);background:#0080cf1a;box-shadow:0 0 15px 2px var(--highlightBg)}form :is(input,textarea)::placeholder{font-size:1.2rem;color:var(--primaryColor);opacity:.5}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}form button{position:relative;font-size:1.2rem;display:flex;justify-content:center;align-items:center;gap:10px;padding:10px 15px;background:transparent;color:var(--primaryColor);border-radius:50px;border:2px solid var(--highlightColor);white-space:nowrap;cursor:pointer;overflow:hidden;z-index:1}form button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--highlightColor);z-index:-1}form button:active{transform:scale(.9)}form .form-result{color:green;display:flex;justify-content:center;align-items:center;gap:10px;font-size:1.2rem;padding:10px 15px;border-radius:50px}form .form-result .icon{color:var(--highlightColor)}::-webkit-scrollbar{display:none}