:root{--black: #000000;--white: #ffffff;--blue: #79BFFF;--blue-dark: #4786FF;--yellow: #ffc904da;--orange: #df8303;--dark-gray: #3e3e3e;--chip-color: var(--blue)}::selection{background-color:var(--blue-dark);color:var(--white)}*{box-sizing:border-box;padding:0;margin:0}body{font-family:"Outfit",sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;color:var(--white);overflow:hidden}.v-hidden{visibility:hidden}ul,li{list-style:none}body,html{overflow-x:hidden}img{max-width:100%}#intro-loader{--loaderclip:50px;overflow:hidden;clip-path:circle(var(--loaderclip));position:fixed;top:0;left:0;right:0;bottom:0;background:url(../images/hero-background.jpg) no-repeat var(--black);background-size:contain;background-position:0% 0%}.main{visibility:hidden}.logo{--logomargin:-30px;z-index:99999;position:fixed;top:50%;left:50%;margin:var(--logomargin);width:60px}.menu-button{z-index:99999;position:fixed;right:20px;top:-20px;cursor:pointer}.menu-button .menu-svg{width:30px}.container{max-width:1200px;margin:0 auto}.button{overflow:hidden;position:relative;background-color:var(--yellow);padding:10px 20px;display:inline-block;text-decoration:none;color:var(--black);border-radius:5px}.button span{z-index:3;position:relative}.button:before{transition:clip-path .5s;position:absolute;width:100%;height:100%;content:"";left:0;top:0;background-color:var(--orange);clip-path:circle(0%)}.button:hover{color:var(--white)}.button:hover:before{transition:clip-path .5s;clip-path:circle(100%)}.heading{padding:20px 0;font-size:clamp(2vw,30px,30vw);font-weight:400}.heading.center{display:block;text-align:center}.hero-wrapper{opacity:0;overflow-x:hidden}.hero-wrapper .hero-section{height:100vh;padding-top:90px;position:relative}.hero-wrapper .hero-section::before{content:"";z-index:3;position:absolute;height:55%;width:100%;left:0;bottom:0px;background:#000;background:linear-gradient(0deg, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%)}.hero-wrapper .hero-section .intro{z-index:5;position:absolute;bottom:0;height:50vh;width:100%;color:var(--white);text-align:center;padding-top:50px}.hero-wrapper .hero-section .intro-subtitle{font-size:clamp(1vw,18px,60vh);display:block}.hero-wrapper .hero-section .intro-title{font-size:clamp(5vw,40px,60vh);font-weight:500;position:relative;color:var(--blue)}.hero-wrapper .hero-section .intro-title::after{opacity:.6;content:attr(title);position:absolute;width:100%;left:5px;top:-2px;color:var(--black);z-index:-1;text-shadow:#fff 1px 0px 0px,#fff .540302px .841471px 0px,#fff -0.416147px .909297px 0px,#fff -0.989992px .14112px 0px,#fff -0.653644px -0.756802px 0px,#fff .283662px -0.958924px 0px,#fff .96017px -0.279415px 0px}.hero-wrapper .hero-section .intro-designation{font-size:clamp(2vw,20px,70vh);font-weight:300;display:block;margin-bottom:5px}.hero-wrapper .hero-section .intro-experience{font-size:clamp(1vw,14px,70vh);font-weight:200;opacity:.8;display:block;margin-bottom:20px}.hero-wrapper .hero-section .flower{width:150px;opacity:0;position:absolute}.hero-wrapper .hero-section .flower--right{right:0;bottom:40%}.code-view{position:absolute;z-index:20}.code-view--left{left:10%;bottom:45%;transform:rotate(-20deg);width:100px}.code-view--right{right:20%;top:15%;transform:rotate(20deg);width:70px}#avatar-container{z-index:2;position:relative;height:50vh;margin-top:30px;display:flex;align-items:center;justify-content:center}#avatar-container::after{opacity:.9;content:"";border:5px solid var(--white);border-bottom:none;background-color:#606060;position:absolute;height:100%;width:400px;margin-left:-200px;top:-5px;left:50%;z-index:-1;border-radius:200px 200px 0 0}#avatar-loading{position:absolute;width:100%;text-align:center;bottom:10%;z-index:12;color:var(--black)}.expert-wrapper{position:relative}.expert-wrapper .pathLine-wrapp{position:absolute;left:0;top:0%;opacity:.3}.expert-wrapper .expert{display:flex;justify-content:space-between;margin-top:50px;padding-bottom:100px}.expert-wrapper .expert .expert-box{display:flex;flex-direction:column;justify-content:space-between;width:28%;background:rgba(41,41,41,.6);backdrop-filter:blur(10px);border-radius:10px;min-height:400px;padding:30px;position:relative;overflow:hidden}.expert-wrapper .expert .expert-box img{width:60px;opacity:.8}.expert-wrapper .expert .expert-box .expert-content abbr{display:block;margin-bottom:10px;font-size:clamp(1.5vw,26px,60vw)}.expert-wrapper .expert .expert-box .expert-content span{color:var(--dark-gray)}.expert-wrapper .expert .expert-box::before{content:"";position:absolute;left:30%;top:0;width:100%;height:100%;background-repeat:no-repeat;background-size:contain;background-position:left center;opacity:.02}.expert-wrapper .expert .expert-box--middle{transform:scale(1.2)}.expert-wrapper .expert .expert-box--middle::before{background-image:url(../images/front-end.svg)}.expert-wrapper .expert .expert-box--left::before{background-image:url(../images/ui-design.svg)}.expert-wrapper .expert .expert-box--right::before{background-image:url(../images/backend.svg)}.experiance{width:900%;height:100vh;display:flex;flex-wrap:nowrap;overflow-x:hidden;background:linear-gradient(180deg, rgba(0, 0, 0, 0.7273109928) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0.4836135138) 100%),url(../images/rectangle-bg.svg) repeat}.experiance-panel{display:flex;width:100%;justify-content:center;align-items:center;height:100vh}.experiance-panel:first-child{background:none}.experiance-year{font-size:clamp(20px,20vw,300px);color:var(--black);text-shadow:0px 5px 62px var(--shadow-tx)}.experiance-year abbr{display:block;color:var(--white);font-size:clamp(20px,2vw,300px)}.experiance-title{position:absolute;width:100%;left:0;transform:translateY(90px);text-align:left;font-size:clamp(20px,10vw,100px);font-weight:500}.experiance-graphic{position:absolute;top:var(--topPos);left:var(--leftPos);width:var(--graphicWidth)}.experiance-heading{font-size:clamp(20px,12vw,300px);font-weight:normal}.good-with{padding:0 0 150px 0;position:relative}.good-with ul{display:flex;justify-content:center;flex-wrap:wrap;gap:35px;margin-top:50px;padding:0 110px}.good-with ul li{height:70px;font-size:20px;overflow:hidden;border:1px solid var(--white);position:relative;padding:10px 30px;display:flex;align-items:center;justify-content:center;color:var(--white);border-radius:50px}.good-with ul li span{z-index:3;position:relative;margin-left:10px}.good-with ul li svg{z-index:3;position:relative;width:30px;display:inline-block}.good-with ul li:before{transition:clip-path .3s;position:absolute;width:100%;height:100%;content:"";left:0;top:0;background-color:var(--chip-color);clip-path:circle(0%)}.good-with ul li:hover{color:var(--black)}.good-with ul li:hover:before{clip-path:circle(100%)}.good-with .good-with-star{position:absolute;left:-50px;width:100px;top:5%}.work{background:url(../images/flower.svg) no-repeat;background-position:60% 90%;background-size:40%}.work-heading{padding:0 10%;text-align:right;font-size:clamp(8vw,50px,80vh);transform:translateY(100%)}.work-content{display:flex;gap:20px;padding:0 10%}.work-left{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.work-right{width:100%;display:flex;justify-content:center;align-items:center}.work-card{overflow:hidden;position:relative;min-height:600px;background-color:var(--blue);width:100%;border-radius:10px;padding:20px;margin-bottom:20px}.work-card.card-one{background:linear-gradient(180deg, #FF9FA4 0%, #B65460 100%)}.work-card.card-two{background:linear-gradient(180deg, #DEEDA1 0%, #A7BD4F 100%)}.work-card.card-three{background:linear-gradient(180deg, #F0D092 0%, #DBB05D 100%)}.work-card svg{position:absolute;opacity:.2;width:var(--w);top:var(--top);left:var(--left);right:var(--right);bottom:var(--bottom)}.work-card img{position:absolute;z-index:1;width:var(--w);top:var(--top);left:var(--left);right:var(--right);bottom:var(--bottom)}.work-card .caption{position:absolute;width:100%;bottom:0;padding:20px;color:var(--black)}.work-card .caption h2{font-size:clamp(2vw,30px,80vh)}.contact{padding:15% 0;height:100vh;background:url("../images/contact-banner.svg") no-repeat center center;background-size:contain}.contact-heading{font-size:clamp(8vw,50px,80vh)}.contact-content{display:flex;gap:20px}.contact-left{width:50%;display:flex;justify-content:space-between;flex-direction:column}.contact-left ul li{margin-bottom:10px}.contact-left ul li svg{margin-right:10px}.contact-left ul li a{color:var(--white);text-decoration:none;font-size:20px}.contact-right{width:50%}.contact-right ul{background-color:rgba(0,0,0,.8);padding:30px;border-radius:20px}.form-group ul li{margin-bottom:20px}.form-input input{font-size:20px;border:none;border-bottom:1px solid #505050;outline:none;padding:15px 15px 15px 0;background:rgba(0,0,0,0);width:100%;color:var(--white)}.form-input button{border:none;font-size:20px;background-color:var(--blue-dark);color:var(--white);cursor:pointer}.form-input button::before{background-color:var(--blue)}.footer{padding:0 30px 200px 30px;position:relative}.footer::before{content:"Developer. Designer";white-space:nowrap;position:absolute;width:100%;bottom:0;left:10%;color:#262626;font-size:clamp(10vw,60px,50vw);font-weight:bold}.footer-heading h2{font-size:clamp(3vw,30px,50vw)}.footer-heading abbr{font-size:clamp(1vw,20px,50vw)}.footer-content{border-top:1px solid #ccc;padding:50px 0 0 0;display:flex;justify-content:space-between;align-items:center}.footer-left{display:flex}.footer-left a{display:inline-block;margin-right:10px}.footer .copyright{text-align:left;margin-top:10px;color:#505050}.custom-cursor{position:absolute;width:40px;height:40px;margin-left:-20px;margin-top:-20px;border-radius:50%;border:2px solid var(--blue-dark);transition:transform .3s ease;transform-origin:center center;pointer-events:none;z-index:9999999999}.grow,.grow-small{transform:scale(4);background:var(--white);mix-blend-mode:difference;border:none}.grow-small{transform:scale(2)}.menu-overlay{z-index:2;position:fixed;z-index:100000000000000000;background:url(../images/menu-bg.svg) no-repeat #fff;background-position:center center;background-size:40%;width:100%;height:100%;overflow-y:scroll;overflow-x:hidden;clip-path:circle(0%);right:0;top:0}.menu-overlay .nav-mobile{display:grid;place-content:center;height:100%}.menu-overlay .nav-mobile ul{list-style:none;padding-left:0}.menu-overlay .nav-mobile ul li{opacity:0;margin-bottom:30px}.menu-overlay .nav-mobile ul li a{text-decoration:none;font-size:clamp(20px,10vw,60px);color:var(--black);transition:.5s}.menu-overlay .nav-mobile ul li a:hover{margin-left:30px}.menu-overlay .menu-nav-close{position:absolute;right:50px;top:50px;height:50px;width:50px;background:url("../images/close-cross.svg") no-repeat;transition:.5s}.menu-overlay .menu-nav-close:hover{transform:rotate(90deg)}.menu-overlay .menu-logo{position:absolute;left:20px;top:30px;width:100px}@media screen and (max-width: 1500px){#avatar-container::after{width:300px;margin-left:-150px}.expert-wrapper .pathLine-wrapp{position:absolute;left:0;top:0}}@media screen and (max-width: 500px){#intro-loader{--loaderclip:30px;clip-path:circle(var(--loaderclip));background-size:100%}.logo{--logomargin:-15px;width:30px;margin:var(--logomargin)}.intro-title{left:1px;top:-1px}.code-view--left{left:5%;bottom:20%;width:60px}.code-view--right{right:5%;top:10%;width:40px}.expert-wrapper .pathLine-wrapp{display:none}.expert-wrapper .expert{display:block;justify-content:space-between;margin-top:50px}.expert-wrapper .expert .expert-box{flex-direction:row;align-items:center;width:90%;margin:0 auto;min-height:auto}.expert-wrapper .expert .expert-box--middle{transform:scale(1);margin:20px auto}.expert-wrapper .expert .expert-box .expert-content{padding-left:20px;text-align:right}.experiance-year{width:100%;text-align:center;font-size:clamp(20px,35vw,300px);transform:translateY(-50px)}.experiance-title{transform:translateY(0px)}.good-with ul{gap:15px;padding:0 20px}.good-with ul li{padding:10px 20px;height:40px;font-size:16px}.good-with ul li svg{width:20px}.good-with-star{position:absolute;left:-25px;width:50px;top:5%}.work-heading{transform:translateY(0%);text-align:center;margin-bottom:30px}.work-content{display:block}.work-card{min-height:400px}.contact{height:auto;padding:20px 0}.contact-heading{margin-bottom:30px}.contact-content{display:block}.contact-left{width:100%;text-align:center}.contact-right{width:100%}.contact-right ul{margin:20px}.footer{padding:0 30px 100px 30px}.footer-content{display:block}.footer-left{margin-bottom:20px}.footer-right{text-align:center}.footer .copyright{font-size:12px;text-align:center}}/*# sourceMappingURL=style.css.map */