@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap";*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;border:none;outline:none;font-family:Poppins,sans-serif}:root{--bg-color: #1f242d;--second-bg-color:#323946;--main-color:#7cf03d;--white-color:#fff;--disabled-color:#fff3}html{font-size:62.5%}body{color:var(--white-color)}header{position:fixed;top:0;left:0;width:100%;padding:2rem 9%;background-color:var(--bg-color);display:flex;justify-content:space-between;align-items:center;z-index:100;visibility:hidden;opacity:0}.header.active{animation:showheader 1.5s linear forwards;animation-delay:1.2s}@keyframes showheader{to{visibility:visible;opacity:1}}.logo{color:var(--white-color);font-size:3rem;font-weight:700}nav a{color:var(--white-color);font-size:2rem;font-weight:500;margin-left:3.5rem;transition:.5s}nav a:hover,nav a.active{color:var(--main-color)}#menu-icon{font-size:4rem;display:none}.bars-box{position:absolute;width:100%;height:100%;display:flex}.bars-box .bar{width:100%;height:100%;background:var(--bg-color);animation:hide-bars .5s ease-in-out both;animation-delay:calc(.1s * var(--i))}@keyframes hide-bars{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.bars-box.active .bar{animation:show-bars .5s ease-in-out both;animation-delay:calc(.1s * var(--i))}@keyframes show-bars{0%{transform:translateY(-100%)}to{transform:translateY(0)}}section{position:absolute;width:100%;height:100%;padding:10rem 9% 2rem;visibility:hidden;opacity:0;overflow:hidden}section.active{animation:show-content 1s linear forwards;animation-delay:1s}@keyframes show-content{to{visibility:visible;opacity:1;overflow:auto}}.home{display:flex;align-items:center;gap:5rem}.home-detail h1{font-size:clamp(3.5rem,10vw,5.5rem)}.home-detail h2{display:inline-block;font-size:3.2rem;margin-top:-1rem}.home-detail h2 span{position:relative;display:inline-block;color:transparent;-webkit-text-stroke:.07rem var(--main-color);animation:display-text 16s linear infinite;animation-delay:calc(-4s * var(--i))}@keyframes display-text{25%,to{display:none}}.home-detail h2 span:before{content:attr(data-text);position:absolute;width:0;border-right:.2rem solid var(--main-color);color:var(--main-color);white-space:nowrap;overflow:hidden;animation:fill-text 4s linear infinite}@keyframes fill-text{10%,to{width:0}70%,90%{width:100%}}.title{margin-left:.8rem}.home-detail p{font-size:1.6rem;margin-top:1rem 0 2.5rem}.home-detail .btn-sci{display:flex;align-items:center;margin-top:2rem}.btn{display:inline-block;padding:1rem 3rem;background:var(--main-color);border:.2rem solid var(--main-color);border-radius:4rem;box-shadow:0 0 1rem var(--main-color);font-size:1.6rem;color:var(--bg-color);font-weight:500;transition:.5s}.btn:hover{background:transparent;color:var(--main-color);box-shadow:none}.home-detail .btn-sci .sci{margin-left:2rem}.home-detail .btn-sci .sci a{display:inline-flex;padding:.8rem;border:.2rem solid var(--main-color);border-radius:50%;font-size:2rem;color:var(--main-color);margin:0 .8rem;transition:.5s}.home-detail .btn-sci .sci a:hover{background:var(--main-color);color:var(--bg-color);box-shadow:0 0 1rem var(--main-color)}.home-img .img-box{position:relative;width:32vw;height:32vw;border-radius:50%;padding:.5rem;display:flex;justify-content:center;align-items:center;overflow:hidden}.home-img .img-box:before,.home-img .img-box:after{content:"";position:absolute;width:50rem;height:50rem;background:conic-gradient(transparent,transparent,transparent,var(--main-color));transform:rotate(0);animation:rotate-border linear 10s infinite}.home-img .img-box:after{animation-delay:-5s}@keyframes rotate-border{to{transform:rotate(360deg)}}.home-img .img-box .img-item{position:relative;width:100%;height:100%;background:var(--bg-color);border-radius:50%;border:.01rem solid var(--bg-color);display:flex;justify-content:center;z-index:1;overflow:hidden}.home-img .img-box .img-item img{position:absolute;top:3rem;display:block;width:85%;object-fit:cover;mix-blend-mode:lighten}.heading{font-size:4.5rem;text-align:center;margin-bottom:2rem}.heading span{color:var(--main-color)}.services-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(30rem,1fr));gap:2rem}.services-container .services-box{padding:3rem 2.5rem;background:var(--second-bg-color);border:.2rem solid var(--second-bg-color);border-radius:1rem;transition:.5s}.services-container .services-box:hover{border-color:var(--main-color);transform:scale(1.02)}.services-box .icon{display:flex;justify-content:space-between;align-items:center}.services-box .icon i{font-size:4.5rem;transition:.5s}.services-box .icon a:hover i{transform:rotate(180deg)}.services-box:hover .icon :not(a i){color:var(--main-color)}.services-box .icon a{display:inline-flex;background-color:var(--white-color);border-radius:50%;padding:1rem;transition:.5s}.services-box:hover .icon a{background:var(--main-color)}.services-box .icon a i{font-size:3rem;color:var(--bg-color);transform:rotate(225deg)}.services-box h3{font-size:3rem;margin:.5rem 0 2rem}.services-box p{font-size:1.6rem}.resume-container{display:grid;grid-template-columns:1fr 2fr;gap:5rem}.resume-box h2{font-size:4.5rem}.resume-box p{font-size:1.6rem}.resume-box .desc{margin:2rem 0 2.5rem}.resume-box .resume-btn{width:100%;height:5.3rem;background:var(--second-bg-color);border:.2rem solid var(--second-bg-color);font-size:1.6rem;color:var(--white-color);font-weight:500;margin-bottom:2rem;border-radius:.8rem;cursor:pointer}.resume-box .resume-btn.active{border-color:var(--main-color);color:var(--main-color)}.resume-box .heading{font-size:3.5rem;text-align:left}.resume-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(30rem,1fr));gap:2rem;height:45rem;overflow:auto}.resume-list::-webkit-scrollbar{width:.7rem}.resume-list::-webkit-scrollbar-thumb{background:transparent;border-radius:1rem}.resume-list:hover::-webkit-scrollbar-thumb{background:var(--main-color)}.resume-list .resume-item{background-color:var(--second-bg-color);border-radius:.8rem;padding:3rem 2.5rem;height:21.5rem;display:flex;flex-direction:column;justify-content:center}.resume-item .year{color:var(--main-color)}.resume-item h3{font-size:2.2rem}.resume-item .company{position:relative;margin-left:2rem;margin-bottom:2rem}.resume-item .company:before{content:"";position:absolute;top:50%;transform:translateY(-50%);padding:.5rem;background:var(--main-color);border-radius:50%;margin-left:-2rem}.resume-details.skills .resume-list{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));height:auto;overflow:visible}.resume-details.skills .resume-item{position:relative;align-items:center;height:auto}.resume-details.skills .resume-item i{font-size:8.5rem;transition:.5s}.resume-details.skills .resume-item:hover i{color:var(--main-color)}.resume-details.skills .resume-item span{position:absolute;top:-20%;background:var(--white-color);color:var(--bg-color);font-size:1.6rem;padding:.5rem 1rem;border-radius:.6rem;pointer-events:none;opacity:0;transform:scale(.9);transition:.5s}.resume-details.skills .resume-item:hover span{top:-25%;opacity:1;transform:scale(1)}.resume-details.about .resume-list{height:auto;grid-template-columns:repeat(auto-fit,minmax(25rem,1fr))}.resume-details.about .resume-item{height:auto;padding:0 0 .5rem;background:transparent}.resume-details.about .resume-item p{color:var(--main-color)}.resume-details.about .resume-item p span{color:var(--white-color);margin-left:1rem;font-size:1.8rem}.contact-container{display:grid;grid-template-columns:1fr 1.3fr;gap:3rem}.contact-container .contact-box:first-child{align-self:center}.contact-box h2{font-size:4rem}.contact-box p{font-size:1.6rem}.contact-box .desc{margin:1.5rem 0 2.5rem}.contact-box .contact-detail{display:flex;align-items:center;margin:2rem 0}.contact-detail i{display:inline-flex;background:var(--second-bg-color);color:var(--main-color);font-size:3rem;padding:1.2rem;border-radius:.6rem;margin-right:1.5rem}.contact-detail .detail p:first-child{color:var(--main-color)}.contact-box form{background:var(--second-bg-color);padding:2.5rem 3.5rem 3.5rem;border-radius:1rem;text-align:center}.contact-box .heading{font-size:3.5rem}.contact-box .field-box{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}.contact-box .field-box input,.contact-box .field-box textarea{padding:1.5rem;background:var(--bg-color);border:.15rem solid var(--bg-color);border-radius:.6rem;font-size:1.6rem;color:var(--white-color)}.contact-box .field-box textarea{grid-column:1 / -1;height:26rem;resize:none}.contact-box .field-box input:focus,.contact-box .field-box textarea:focus{border-color:var(--main-color)}.contact-box .btn{margin-top:2rem;cursor:pointer}@media screen and (max-width: 1200px){html{font-size:55%}}@media screen and (max-width: 992px){.header{padding:2rem 4%}section{padding:10rem 4% 2rem}}@media screen and (max-width: 810px){.contact-box .field-box{grid-template-columns:1fr}}@media screen and (max-width: 768px){#menu-icon{display:block}nav{position:absolute;top:100%;left:0;width:100%;padding:1rem 0;background:var(--bg-color);border-top:.1rem solid rgba(0,0,0,.2);box-shadow:0 .5rem 1rem #0003;text-align:center;display:none}nav.active{display:block}nav a{display:block;margin:4rem 0}.home{flex-direction:column-reverse;justify-content:center;gap:2rem}.home-img .img-box{width:35rem;height:35rem}.resume-container,.contact-container{grid-template-columns:1fr}.resume-container{gap:3rem}.contact-box .field-box{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 600px){.home-img .img-box{width:30rem;height:30rem}.contact-box .field-box{grid-template-columns:1fr}}@media screen and (max-width: 450px){html{font-size:50%}}@media screen and (max-width: 400px){.home-detail,.resume-box h2,.resume-box .heading,.resume-box .desc,.resume-details.about .resume-item{text-align:center}.home-detail .btn-sci{flex-direction:column-reverse}.home-detail .btn-sci .sci{margin-left:0;margin-bottom:2rem}.contact-box form{padding:2.5rem 3rem 3.5rem}.contact-box h2{font-size:3.5rem}}
