@import"https://fonts.googleapis.com/css2?family=Poppins:wght@100;500;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Bangers&display=swap";*{padding:0;margin:0;list-style:none;text-decoration:none}body{background:#fff;font-family:Poppins,sans-serif;height:2000px}header{width:100%;height:350px;background:#259be9;background-repeat:no-repeat;position:relative;z-index:9999}header:before{position:absolute;content:"";width:100%;height:400px;background-image:url("data:image/svg+xml,%3csvg%20id='visual'%20viewBox='0%200%201440%20400'%20width='1440'%20height='400'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20version='1.1'%3e%3cpath%20d='M0%20293L16%20285.3C32%20277.7%2064%20262.3%2096%20262.2C128%20262%20160%20277%20192%20291.2C224%20305.3%20256%20318.7%20288%20325.2C320%20331.7%20352%20331.3%20384%20315.5C416%20299.7%20448%20268.3%20480%20259C512%20249.7%20544%20262.3%20576%20282.2C608%20302%20640%20329%20672%20331.3C704%20333.7%20736%20311.3%20768%20303.8C800%20296.3%20832%20303.7%20864%20312.8C896%20322%20928%20333%20960%20320.5C992%20308%201024%20272%201056%20256.2C1088%20240.3%201120%20244.7%201152%20265.8C1184%20287%201216%20325%201248%20328.8C1280%20332.7%201312%20302.3%201344%20288.3C1376%20274.3%201408%20276.7%201424%20277.8L1440%20279L1440%20401L1424%20401C1408%20401%201376%20401%201344%20401C1312%20401%201280%20401%201248%20401C1216%20401%201184%20401%201152%20401C1120%20401%201088%20401%201056%20401C1024%20401%20992%20401%20960%20401C928%20401%20896%20401%20864%20401C832%20401%20800%20401%20768%20401C736%20401%20704%20401%20672%20401C640%20401%20608%20401%20576%20401C544%20401%20512%20401%20480%20401C448%20401%20416%20401%20384%20401C352%20401%20320%20401%20288%20401C256%20401%20224%20401%20192%20401C160%20401%20128%20401%2096%20401C64%20401%2032%20401%2016%20401L0%20401Z'%20fill='%23259be9'%20stroke-linecap='round'%20stroke-linejoin='miter'%3e%3c/path%3e%3c/svg%3e");transform:scaleY(-1);bottom:-395px;z-index:-1}nav{position:fixed;width:100%;height:65px;background:transparent;display:flex;align-items:center;justify-content:space-between;z-index:9999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.logo a{margin-left:40px;color:#000;text-transform:uppercase;-webkit-user-select:none;user-select:none}.nav-list{margin-right:40px}.nav-item{display:inline-block;font-size:14px;font-weight:400;padding:0 20px;text-transform:uppercase}.a-link{color:#2a2b2b;text-decoration:none}.resume-button{width:100px;padding:10px;font-size:13px;background:#000;text-align:center;border-radius:4px;font-weight:500;cursor:pointer;text-transform:capitalize}.resume-link{color:#fff;display:flex;justify-content:space-between;align-items:center}.nav-list-mobile{display:none}.menu-icons{display:none;width:20px;margin:0 30px}.header-container{display:flex;width:100%;align-items:center;overflow:hidden}.header-info{width:100%;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:150px}.info-title{font-family:Bangers,system-ui;color:#444;position:relative;font-size:50px;text-align:center;letter-spacing:2px}.info-title span{font-size:60px;color:#fff}.info-title .role-title{color:#2a2b2b00;font-weight:500;-webkit-text-stroke:1px #561d1d;position:relative;z-index:0}.info-title .role-title:before{content:var(--content);position:absolute;transform:rotate(-362deg);color:#ec0f0ff5;visibility:visible;z-index:0}.info-des{font-size:14px;width:80%;margin:5px 0;color:#2a2b2b}.mobile-resume{display:none}.illustration{width:50%;height:100%;margin-top:80px;-webkit-user-select:none;user-select:none}.illut-image{width:100%;height:100%}.image-cover{position:absolute;width:100%;height:100%;background:transparent;top:0}.keyboard-container{background:#fff;border-radius:12px;width:100%;max-width:850px;display:flex;justify-content:center;flex-direction:column;margin:50px auto;padding:10px;z-index:999;position:relative;border:.5px solid #f9f9f9;box-shadow:#959da533 0 8px 24px}.keyboard-row{display:flex;justify-content:flex-start;align-items:center;width:100%}.keyboard-row .key{flex-grow:1;height:30px;padding:10px;background:#f3f2f2;border-radius:5px;font-size:14px;color:#3d4349;margin:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.keyboard-row .key.active{background:#1198f6;color:#fff}.keyboard-row .key.backsapce-active{background:#eb0404;color:#fff}.key.space{flex-grow:8}.key.space:before{content:"Space"}.portfolio-section{width:100%;height:auto;display:flex;align-items:center;flex-direction:column;margin-top:300px;position:relative;overflow-x:clip;z-index:0}.portfolio-section:before{position:absolute;content:"";width:270px;height:270px;border-radius:50px;rotate:-20deg;right:-92px;bottom:0;background:#bfa99200;z-index:-1;border:1px dashed #000}.portfolio-section:after{position:absolute;content:"";width:270px;height:270px;border-radius:50px;rotate:-20deg;right:-100px;bottom:0;background:#ffac59bf;z-index:-1}.portfolio-cont{display:grid;grid-template-columns:repeat(2,1fr);height:auto;width:950px;gap:20px}.project{width:100%;background:#fff8;border:#e1e1e1 solid 1px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-content:center;border-radius:8px;position:relative;overflow:hidden;transition:all .5s}.project:hover{box-shadow:#959da533 0 8px 24px}.project-title{margin:10px;font-size:50px;color:#242323}.project-description{font-size:14px;font-weight:400;color:#727171;margin:0 10px;line-height:1.5}.project-language{margin:10px 5px}.project-button{padding:10px 15px;font-size:14px;background:#1198f6;text-align:center;border-radius:24px;right:20px;color:#fff;width:100px;margin:10px}.project-button:hover{opacity:.6}.language-list{display:inline-block;margin:3px;padding:2px 13px;background:#f3f2f2;color:#3d4349;font-size:13px;border-radius:2px}.preview-image{width:100%;border-radius:7px}.about-container{margin:auto;width:100%;height:auto;display:flex;flex-direction:column;align-items:center;position:relative}.about-container:after{position:absolute;content:"";width:300px;height:300px;border-radius:50%;left:-147px;border:1px solid #464545;z-index:-1}.about-container:before{position:absolute;content:"";width:300px;height:300px;border-radius:50%;left:-150px;top:1%;background:#259be96e;z-index:-1}.about-tab{max-width:1300px;width:100%;height:auto;padding:50px 0;display:flex;flex-direction:column;align-items:center}.about-heading,.portfolio-heading,.contact-heading{font-family:Bangers,system-ui;color:transparent;color:#259be9;letter-spacing:2px;font-size:45px;text-align:center;z-index:2;position:relative;margin:20px 0}.about-heading:before,.portfolio-heading:before,.contact-heading:before{position:absolute;content:"";width:100%;height:100%;left:0;top:4px;color:#e0e0e0;z-index:-1}.about-heading:before{content:"About Me"}.portfolio-heading:before{content:"Portfolio"}.contact-heading:before{content:"Contact"}.about-des{width:60%;color:#464545;font-size:13px;font-weight:500;word-spacing:1px}.social-links{margin-top:20px;display:grid;grid-template-columns:auto auto auto auto;gap:5px}.social-links *{width:120px;padding:8px 11px;font-size:14px;color:#fff;font-weight:500;text-align:center}.linkedin{background:#0a66c2}.github{background:#24292f}.whatsapp{background:#25d366}.email-link{background:#e40e06}.linkedin:hover,.github:hover,.whatsapp:hover,.email-link:hover{opacity:.7}.skill-section{width:100%;height:auto;display:flex;align-items:center;background:green}.skill-tab{width:100%;height:auto;padding:50px 0;display:flex;align-items:center;flex-direction:column;position:relative;overflow:hidden}.skill-tab:after{position:absolute;content:"";width:180px;height:180px;border:1px solid #000;right:-100px;transform:rotate(100deg);z-index:-1}.skill-tab:before{position:absolute;content:"";width:170px;height:170px;background:#259be96e;right:-80px;transform:rotate(100deg);z-index:-1}.skill-heading{color:#464545;font-size:18px;text-align:center;font-weight:500}.skills-cont{margin-top:10px;width:50%;height:auto;display:grid;grid-template-columns:auto auto auto auto;gap:5px;text-align:center;justify-content:center}.skill-name{width:160px;padding:10px 0;border:2px solid transparent;background:#f3f2f2;font-size:14px;font-weight:400;text-align:center;cursor:pointer}.plus{background:#fff;border:2px solid #383737;border-style:dashed;font-size:15px}.contact-container{margin-top:50px;width:100%;height:auto;display:flex;align-items:center;flex-direction:column;position:relative;overflow:hidden}.contact-container:after{position:absolute;content:"";width:500px;height:500px;border-radius:50%;bottom:-50%;left:-200px;border:1px solid #464545;z-index:-1}.contact-container:before{position:absolute;content:"";width:500px;height:500px;border-radius:50%;bottom:-50%;left:-210px;background:#259be96e;z-index:-1}.contact-heading{padding:0}form{max-width:750px;margin:0 0 50px;width:50%;display:flex;flex-direction:column}.name,.email,.submit,.message{margin:5px 0;padding:8px;font-size:15px;border:1px solid #e1e1e1;border-radius:4px;outline:none}.message{resize:vertical}.submit{background:#1198f6;font-size:15px;border:none;outline:none;border-radius:2px;color:#fff;cursor:pointer;padding:9px 8px}@media screen and (width <=1050px){.portfolio-cont{width:90%;grid-template-columns:auto auto}.skills-cont{width:80%;grid-template-columns:auto auto auto}}@media screen and (width <=900px){.skills-cont{width:90%;grid-template-columns:auto auto}.keyboard-container{max-width:700px}}@media screen and (width <=768px){nav{height:50px}.logo{font-size:18px}.nav-list{display:none}.menu-icons{display:block}.nav-list-mobile{background:#fff;background-repeat:no-repeat;display:block;width:100%;height:100vh;position:absolute;top:0}.close-menu{position:absolute;right:30px;top:20px;width:20px}.nav-item-mobile{padding:10px;text-align:center;text-transform:uppercase}.nav-item-mobile:nth-child(2){margin-top:70px}.resume-button{position:absolute;left:50%;transform:translate(-50%,-50%);margin-top:25px;text-transform:capitalize}.portfolio-section{margin-top:150px}.header-info{width:100%;margin-top:100px}header:after{display:none}.info-title{font-size:30px}.info-des{font-size:14px;width:100%;margin:5px 0;color:#2a2b2b}.mobile-resume{display:block;position:relative;top:5px;left:50px}.illustration{display:none}.portfolio-cont{grid-template-columns:auto}.about-des{width:85%}.social-links{grid-template-columns:auto auto}.skills-cont{width:90%;grid-template-columns:auto auto}form{width:80%}.keyboard-container{display:none}}@media screen and (width <=550px){.info-title .role-title{display:inline;visibility:hidden;text-align:left}.info-title .role-title:after{content:"Frontend Developer";position:absolute;visibility:visible;transform:rotate(-362deg);-webkit-text-stroke:1px #fff8f8;left:0;top:0;z-index:-1}.info-title{font-size:65px}.info-title span{display:block;height:0}.project-title{font-size:40px;margin-left:10px;line-height:45px}}body{height:auto}.mediuminfo-container-header{margin:0;width:100%;height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#259be9;position:relative;z-index:0;box-shadow:#959da533 0 8px 24px}.mediuminfo-container-header:before{position:absolute;content:"";width:100%;height:400px;background-image:url("data:image/svg+xml,%3csvg%20id='visual'%20viewBox='0%200%201440%20400'%20width='1440'%20height='400'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20version='1.1'%3e%3cpath%20d='M0%20293L16%20285.3C32%20277.7%2064%20262.3%2096%20262.2C128%20262%20160%20277%20192%20291.2C224%20305.3%20256%20318.7%20288%20325.2C320%20331.7%20352%20331.3%20384%20315.5C416%20299.7%20448%20268.3%20480%20259C512%20249.7%20544%20262.3%20576%20282.2C608%20302%20640%20329%20672%20331.3C704%20333.7%20736%20311.3%20768%20303.8C800%20296.3%20832%20303.7%20864%20312.8C896%20322%20928%20333%20960%20320.5C992%20308%201024%20272%201056%20256.2C1088%20240.3%201120%20244.7%201152%20265.8C1184%20287%201216%20325%201248%20328.8C1280%20332.7%201312%20302.3%201344%20288.3C1376%20274.3%201408%20276.7%201424%20277.8L1440%20279L1440%20401L1424%20401C1408%20401%201376%20401%201344%20401C1312%20401%201280%20401%201248%20401C1216%20401%201184%20401%201152%20401C1120%20401%201088%20401%201056%20401C1024%20401%20992%20401%20960%20401C928%20401%20896%20401%20864%20401C832%20401%20800%20401%20768%20401C736%20401%20704%20401%20672%20401C640%20401%20608%20401%20576%20401C544%20401%20512%20401%20480%20401C448%20401%20416%20401%20384%20401C352%20401%20320%20401%20288%20401C256%20401%20224%20401%20192%20401C160%20401%20128%20401%2096%20401C64%20401%2032%20401%2016%20401L0%20401Z'%20fill='%23259be9'%20stroke-linecap='round'%20stroke-linejoin='miter'%3e%3c/path%3e%3c/svg%3e");transform:scaleY(-1);bottom:-400px;z-index:-1}.projectinfo-container{background:transparent;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);width:90%;max-width:1050px;position:absolute;left:50%;margin-top:-80px;padding:20px;transform:translate(-50%);display:flex;flex-direction:column;z-index:1}.projectinfo-backimg,.projectinfo-closeimg{width:20px;position:absolute;top:10px;cursor:pointer;padding:13px;border-radius:50%;transition:all .5s}.projectinfo-backimg{left:10px}.projectinfo-closeimg{right:10px}.projectinfo-name-container{width:100%;display:flex;justify-content:space-between;align-items:center}.projectinfo-live-link{background:#000;color:#fff;width:50px;display:flex;justify-content:space-between;padding:10px 15px;border-radius:20px;text-decoration:none;font-size:14px;font-weight:500}.projectinfo-name{color:#222121;font-size:50px;font-weight:600;margin:5px 0}.projectinfo-languages{display:flex;gap:15px;margin:20px 0}.projectinfo-languages .each-language{background:#f3f2f2;font-size:13px;font-weight:500;padding:8px 14px;color:#464545;text-align:center;text-transform:uppercase;margin-top:-10px;border-radius:20px}.projectinfo-detail,.project-each-info{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:20px}.project-each-info img,.project-each-info video{width:100%;height:auto;border-radius:3px;margin-bottom:10px}.project-each-info .projectinfo-detail-text{width:100%;text-align:left;font-weight:500;font-size:14px;color:#464545;margin-bottom:20px}@media screen and (width <=768px){.projectinfo-container{width:90%;margin-top:-60px}.project-each-info img,.project-each-info video{width:100%;height:auto}}@media screen and (width <=480px){.projectinfo-container{width:85%;margin-top:-50px}.projectinfo-name{font-size:30px}}