@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");*{margin:0;padding:0;box-sizing:border-box;outline:none;text-decoration:none;list-style:none}body,html{font-family:Poppins,sans-serif;overflow-x:hidden;z-index:10;background-image:repeating-radial-gradient(circle at center center,transparent 0,transparent 13px,rgba(0,0,0,.03) 0,rgba(0,0,0,.03) 24px,transparent 0,transparent 62px,rgba(0,0,0,.03) 0,rgba(0,0,0,.03) 96px),repeating-radial-gradient(circle at center center,#fff 0,#fff 14px,#fff 0,#fff 18px,#fff 0,#fff 28px,#fff 0,#fff 32px);background-size:21px 21px}body ::-webkit-scrollbar,html ::-webkit-scrollbar{width:8px;border:1px solid rgba(100,125,238,.349)}body ::-webkit-scrollbar-thumb,html ::-webkit-scrollbar-thumb{background:#6c55e0;border-radius:10px}body ::-webkit-scrollbar-thumb:hover,html ::-webkit-scrollbar-thumb:hover{background:rgba(7,7,196,.678)}body.active{background:var(--color-1);color:var(--color-2)}body.active .dark_light{transition:all .4s;background-color:var(--color-2);border-radius:50%;fill:var(--color-1)!important;padding:3px;width:33px!important;height:33px!important}body.active .top-titles h3,body.active .top-titles h4{color:var(--color-2)}body.active .header{border-bottom:1px solid hsla(0,0%,100%,.2);background:var(--color-1);z-index:1000}body.active .header .row .h-left .logo{color:var(--color-2)}body.active .header .row .h-left .logo svg{fill:var(--color-2)}body.active .header .row .h-right .nav .list .list-item a{color:var(--color-2)}body.active .header .row .h-right .nav .list .list-item a.active{color:var(--color-3)}body.active .header .row .h-right .nav svg{fill:var(--color-2)}body.active #hero .row .left h3,body.active #hero .row .left p{color:var(--color-2)}body.active #hero .row .right{background:var(--color-3)}body.active #about .row .right p{color:var(--color-2)}body.active #skills ul li{border:1px solid hsla(0,0%,100%,.2);background:transparent}body.active #skills ul li span{background:#2f2f2f;color:var(--color-2)}body.active #experience .row .left .item{border-bottom:1px solid hsla(0,0%,100%,.2)}body.active #experience .row .left .item ul li{color:var(--color-2)}body.active #experience .row .left .item ul li svg{fill:var(--color-2)}body.active #experience .row .right .item{border-bottom:1px solid hsla(0,0%,100%,.2)}body.active #experience .row .right .item ul li{color:var(--color-2)}body.active #experience .row .right .item ul li svg{fill:var(--color-2)}body.active #portfolio .tabs-menu li button{color:var(--color-2);border:1px solid hsla(0,0%,100%,.2)}body.active #portfolio-card{background:hsla(0,12%,92%,.118);border:1px solid hsla(0,0%,100%,.2)}body.active #contact .row ul li div a,body.active #contact .row ul li div a.title,body.active #contact .row ul li div span,body.active #contact .row ul li div span.title,body.active #portfolio-card .portfolio-desc .links a,body.active #portfolio-card .portfolio-desc .portfolio-name{color:var(--color-2)}body.active #contact .row form input,body.active #contact .row form textarea{color:var(--color-2);border:1px solid hsla(0,0%,100%,.2)}body.active #contact .row form input::placeholder,body.active #contact .row form textarea::placeholder{color:var(--color-2)}body.active .footer{border-top:1px solid hsla(0,0%,100%,.2);background:var(--color-1)}body.active #mobile-menu ul li a.active{box-shadow:0 8px 21px 0 rgba(0,0,0,.16);background:linear-gradient(134.25deg,#9181f4 -5.847%,#5038ed 109.546%)}body.active #mobile-menu ul li a.active svg{fill:var(--color-2)}body.active #mobile-menu ul li a svg{fill:#f6f3f3}.dark_light{padding:4px!important;width:33px!important;height:33px!important}.Toastify__toast-icon svg{fill:var(--color-3)}.Toastify__progress-bar--success{background:var(--color-3)!important}.loading{position:fixed;top:0;left:0;width:100%;z-index:1000;height:100%;box-shadow:0 15px 90px 0 rgba(101,11,255,.25);background:#6c55e0;display:grid;place-items:center}:root{--color-1:#000;--color-2:#fff;--color-3:#6c55e0;--color-4:#505050}.container{max-width:1200px;margin:0 auto;padding:0 20px}#myBtn{position:fixed;bottom:100px;border-radius:50%;right:10px;z-index:99;font-size:15px;outline:none;background-color:#7f53ac;background-image:linear-gradient(315deg,#7f53ac,#647dee 74%);color:#fff;cursor:pointer;width:43px;height:43px;border:none;opacity:0;transition:all .5s}#myBtn.active{opacity:1;bottom:110px}#myBtn.active:hover{transform:scale(1.1)}.global-btn{display:flex;align-items:center;padding:10px 23px;border-radius:20px;color:var(--color-2);border:none;font-size:21px;font-weight:500;cursor:pointer;transition:all .5s;box-shadow:0 8px 21px 0 rgba(0,0,0,.16);background:linear-gradient(134.25deg,#9181f4 -5.847%,#5038ed 109.546%);position:relative;font-family:Poppins,sans-serif;border:1px solid var(--color-3);overflow:hidden}.global-btn a{color:var(--color-2)!important}.global-btn:hover a{color:var(--color-3)}.global-btn .fa-regular{margin-left:10px}.global-btn:after{width:100%;height:100%;background:var(--color-3);position:absolute;top:0;left:0;content:"";border-radius:20px;z-index:-1;transition:all .3s}.global-btn:hover:after{width:0}.global-btn svg{fill:var(--color-2)!important;margin-left:10px}.global-btn:hover{color:var(--color-3);transform:scale(.95)}.global-btn:hover svg{fill:var(--color-3)}.top-titles{padding-top:80px;display:flex;flex-direction:column;align-items:center;line-height:40px}.top-titles h4{color:var(--color-4);font-size:24px;font-weight:400}.top-titles h3{font-size:38px;color:var(--color-1);font-weight:500}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--color-3)}80%{box-shadow:0 0 0 15px hsla(0,100%,76%,0)}to{box-shadow:0 0 0 0 hsla(0,100%,76%,0)}}.header{padding:23px 0;transition:.6s ease-in-out;position:fixed;width:100%;z-index:1000;background-color:hsla(0,0%,100%,.4);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-bottom:1px solid rgba(0,0,0,.1)}.header .row{display:flex;justify-content:space-between;align-items:center}.header .row .h-left .logo{font-size:24px;white-space:nowrap;display:flex;align-items:center;color:var(--color-3)}.header .row .h-left .logo svg{margin-right:10px;fill:var(--color-3)}.header .row .h-right .nav{display:flex;align-items:center}.header .row .h-right .nav svg{cursor:pointer;margin-left:20px;width:30px;height:30px;fill:var(--color-1)}.header .row .h-right .nav .list{display:flex;gap:30px}.header .row .h-right .nav .list .list-item a{color:var(--color-1);font-size:21px;font-weight:400;position:relative;transition:all .35s}.header .row .h-right .nav .list .list-item a.active{color:var(--color-3)}.header .row .h-right .nav .list .list-item a:after{transition:all .3s;width:0;height:2px;position:absolute;bottom:0;left:0;content:"";background:var(--color-3)}.header .row .h-right .nav .list .list-item a:hover:after{width:100%}#hero{padding:180px 30px 0;display:grid}#hero .row{display:flex;align-items:center;justify-content:space-between}#hero .row .left h1{font-size:45px;font-weight:500}#hero .row .left h3{font-size:30px;font-weight:400;width:max-content;position:relative;color:var(--color-1);margin:1px 0 15px}#hero .row .left p{font-size:20px;color:var(--color-4);max-width:430px;margin-bottom:20px}#hero .row .right{width:450px;height:450px;border-radius:50%;box-shadow:0 8px 21px 0 rgba(0,0,0,.16);background:linear-gradient(134.25deg,#9181f4 -5.847%,#5038ed 109.546%);display:flex;justify-content:center;align-items:center;animation:pulse 2s infinite}#hero .row .right img{margin-top:-88px;object-fit:cover!important;border-bottom-left-radius:217px;border-bottom-right-radius:217px}#sosial{position:fixed;top:50%;left:0;transform:translateY(-50%);box-shadow:0 8px 21px 0 rgba(0,0,0,.16);background:linear-gradient(134.25deg,#9181f4 -5.847%,#5038ed 109.546%);padding:20px 13px;border-top-right-radius:10px;border-bottom-right-radius:10px;z-index:100}#sosial ul{display:flex;flex-direction:column;gap:25px}#sosial ul li{display:flex;align-items:center;position:relative}#sosial ul li:hover span{visibility:visible;opacity:1;right:-130px;transform:scale(1);transition:all .3s}#sosial ul li span{width:110px;text-align:center;padding:10px 15px;box-shadow:0 8px 21px 0 rgba(0,0,0,.16);background:linear-gradient(134.25deg,#9181f4 -5.847%,#5038ed 109.546%);border-radius:50px;position:absolute;right:0;z-index:-1;transform:scale(0);visibility:hidden;opacity:0;color:var(--color-2)}#sosial ul li a{display:flex;width:100%}#sosial ul li a svg{fill:var(--color-2);font-size:27px;transition:all .3s}#sosial ul li a svg:hover{transform:scale(1.2)}#about .row{padding-top:50px;display:flex;justify-content:space-between;align-items:center}#about .row .left{padding-right:60px;position:relative}#about .row .left:after{width:480px;height:360px;position:absolute;top:0;left:0;content:"";background:rgba(112,98,183,.29);z-index:-1;transform:rotate(3deg);border-radius:10px}#about .row .left img{object-fit:cover;border-radius:5px}#about .row .right p{font-size:19px;line-height:30px;color:var(--color-4)}#about .row .right ul{padding:20px 0;display:flex;gap:50px;text-align:center}#about .row .right ul li{font-size:30px;font-weight:500}#about .row .right ul li span{font-size:23px!important;font-weight:500}#about .row .right ul li span.count{font-size:29px!important}#skills ul{padding-top:50px;display:grid;grid-template-columns:repeat(6,1fr);grid-gap:27px 20px;gap:27px 20px}#skills ul li{padding-top:20px;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:all .3s;position:relative;padding-bottom:40px;background:#fff}#skills ul li span{color:var(--color-4);display:flex;justify-content:center;font-size:15px;font-weight:500;position:absolute;left:50%;transform:translate(-50%);border-radius:10px;padding:4px 8px;bottom:-16px;width:max-content;color:var(--color-1);border:1px solid rgba(9,30,66,.13);background:var(--color-2)}#skills ul li:hover{transform:scale(1.1)}#skills ul li img{width:100%;height:60px;object-fit:contain;display:block}#experience .row{padding-top:60px;display:flex;justify-content:space-between;gap:70px}#experience .row .left{width:100%}#experience .row .left .title{display:flex;align-items:center;font-size:28px;font-weight:500;margin-bottom:10px}#experience .row .left .title svg{width:40px;height:40px;margin-right:10px;fill:var(--color-3)}#experience .row .left .title1{display:flex;align-items:center;font-size:28px;font-weight:500;margin-bottom:10px}#experience .row .left .title1 svg{width:40px;height:40px;margin-right:10px}#experience .row .left .item{border-bottom:1px solid rgba(0,0,0,.117);display:flex;flex-direction:column;padding:20px 0}#experience .row .left .item:first-child{padding-top:0}#experience .row .left .item .item-title{font-size:20px;margin-bottom:5px}#experience .row .left .item ul{display:flex;justify-content:space-between;align-items:center}#experience .row .left .item ul li{margin-top:10px;display:flex;align-items:center;color:var(--color-4);font-size:16px}#experience .row .left .item ul li .date{white-space:nowrap}#experience .row .left .item ul li svg{width:20px;height:20px;fill:var(--color-4);margin-right:5px}#experience .row .right{width:100%}#experience .row .right .title{display:flex;align-items:center;font-size:28px;font-weight:500;margin-bottom:10px}#experience .row .right .title svg{width:40px;height:40px;margin-right:10px;fill:var(--color-3)}#experience .row .right .item{border-bottom:1px solid rgba(0,0,0,.117);display:flex;flex-direction:column;padding:20px 0}#experience .row .right .item:first-child{padding-top:0}#experience .row .right .item .item-title{font-size:20px;margin-bottom:5px}#experience .row .right .item ul{display:flex;justify-content:space-between;align-items:center}#experience .row .right .item ul li{margin-top:10px;display:flex;align-items:center;color:var(--color-4);font-size:17px}#experience .row .right .item ul li .date{white-space:nowrap}#experience .row .right .item ul li svg{width:22px;height:22px;fill:var(--color-4);margin-right:5px}#portfolio .container{max-width:1250px}#portfolio .button-load{display:flex;justify-content:center;align-items:center;width:max-content;margin:30px auto 0}#portfolio .button-load .aws-btn__content{background:var(--color-3);font-size:20px;color:var(--color-2);padding:0 20px}#portfolio .button-load .aws-btn--primary .aws-btn__wrapper:before{background:#8193e0}#portfolio .tabs-menu{padding-top:30px;display:flex;justify-content:center;gap:15px;margin-bottom:40px}#portfolio .tabs-menu li button{border:none;padding:10px 20px;color:var(--color-2);font-size:20px;font-weight:500;border-radius:50px;border:1px solid rgba(108,85,224,.475);background:transparent;color:var(--color-3);cursor:pointer;position:relative;overflow:hidden;font-family:Poppins,sans-serif}#portfolio .tabs-menu li button:after{width:0;height:100%;position:absolute;top:0;right:0;content:"";border-radius:10px;box-shadow:0 8px 21px 0 rgba(0,0,0,.16);background:linear-gradient(134.25deg,#9181f4 -5.847%,#5038ed 109.546%);transition:.3s ease;z-index:-1}#portfolio .tabs-menu li button.active{color:var(--color-2)}#portfolio .tabs-menu li button.active:after{width:100%}#portfolio .row{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:20px;gap:20px}#portfolio-card{border-radius:5px;background:hsla(0,0%,96%,.718);box-shadow:0 1px 2px 0 rgba(0,0,0,.1);border:1px solid hsla(0,5%,96%,.718);transition:all .4s}#portfolio-card:hover{transform:scale(.99);border:1px solid rgba(108,85,224,.4)}#portfolio-card .lazy-load-image-background{width:100%;height:230px}#portfolio-card .lazy-load-image-background img{width:100%;height:230px;object-fit:cover!important;border-top-right-radius:5px;border-top-left-radius:5px;display:block;object-position:top}#portfolio-card .portfolio-desc{padding:15px}#portfolio-card .portfolio-desc .portfolio-name{font-size:21px;color:var(--color-1);font-weight:500}#portfolio-card .portfolio-desc .links{padding-top:10px;display:flex;gap:10px}#portfolio-card .portfolio-desc .links a{align-items:center;border:1px solid #6c55e0;border-radius:10px;color:#6c55e0;display:flex;font-size:17px;font-weight:400;justify-content:center;padding:8px 15px;text-decoration:none;transition:all .3s}#portfolio-card .portfolio-desc .links a:hover{background:var(--color-3);color:var(--color-2)}#portfolio-card .portfolio-desc .links a:hover i{color:var(--color-2)}#portfolio-card .portfolio-desc .links a i{font-size:17px;margin-left:10px;color:var(--color-3)}#contact .row{display:flex;justify-content:space-between;padding-top:50px;padding-left:40px;padding-right:40px}#contact .row ul{width:90%;display:flex;flex-direction:column;gap:30px}#contact .row ul li{display:flex}#contact .row ul li svg{margin-right:27px;fill:var(--color-3);font-size:37px}#contact .row ul li div{display:flex;flex-direction:column}#contact .row ul li div a,#contact .row ul li div span{color:var(--color-4);font-size:20px}#contact .row ul li div a.title,#contact .row ul li div span.title{color:var(--color-1);font-size:23px}#contact .row form{display:flex;flex-direction:column;width:100%}#contact .row form input,#contact .row form textarea{background-color:rgba(105,30,180,.082);border-radius:10px;color:#000;font-family:Poppins,sans-serif;font-size:18px;margin-bottom:20px;padding:20px;border:none;resize:none}#contact .row form input::placeholder,#contact .row form textarea::placeholder{color:var(--color-1);font-family:Poppins,sans-serif;font-size:18px}#contact .row form button{width:max-content}#mobile-menu{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--color-2);border-radius:50px;padding:10px;z-index:100;box-shadow:0 1px 1px rgba(9,30,66,.25),0 0 1px 1px rgba(9,30,66,.13);display:none}#mobile-menu ul{display:flex;align-items:center;gap:5px;position:relative}#mobile-menu ul li a{border-radius:50%;width:47px;height:47px;display:grid;place-items:center;transition:all .1s}#mobile-menu ul li a.active{box-shadow:0 8px 21px 0 rgba(0,0,0,.16);background:linear-gradient(134.25deg,#9181f4 -5.847%,#5038ed 109.546%)}#mobile-menu ul li a.active svg{fill:var(--color-2)}#mobile-menu ul li a svg{width:27px;height:27px;fill:var(--color-1);display:flex}.footer{margin-top:60px;color:var(--color-3);padding:30px 0;width:100%;box-shadow:0 8px 21px 0 rgba(0,0,0,.16);background:linear-gradient(134.25deg,#9181f4 -5.847%,#5038ed 109.546%)}.footer .footer-row .footer-item{display:flex;justify-content:space-between;align-items:center;text-align:center}.footer .footer-row .footer-item .footer-title{color:var(--color-2);font-size:30px;font-weight:500}.footer .footer-row .footer-item .simple-footer{color:var(--color-2);font-size:20px}.footer .footer-row .footer-item .footer-list ul{display:flex}.footer .footer-row .footer-item .footer-list ul li{margin-right:25px}.footer .footer-row .footer-item .footer-list ul li a{color:var(--color-2);font-size:20px}.footer .footer-row .footer-item .footer-list ul li:last-child{margin-right:0}.footer .footer-row .footer-item .sosial-icon a{color:var(--color-2);font-size:30px;margin-left:15px}.footer .footer-row .footer-item .sosial-icon a:first-child{margin-left:0}@media only screen and (max-width:992px){#mobile-menu{background-color:hsla(0,0%,100%,.4);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:block}#sosial{position:absolute;top:320px;padding:15px 10px}#sosial ul{gap:20px}#sosial ul li a svg{width:23px;height:23px}.header{padding:20px 0}.header .row .h-right .nav .list{display:none}#hero{padding-top:120px}#hero .row{flex-direction:column}#hero .row .right{order:-1;overflow:hidden;height:400px;width:400px}#hero .row .right img{height:400px;margin-top:0}#hero .row .left{margin-top:15px;text-align:center}#hero .row .left button{margin:0 auto}#hero .row .left h3{margin:0 auto 10px}#about .row{flex-direction:column}#about .row .left{padding:0}#about .row .right{margin-top:20px;max-width:600px}#about .row .right ul{justify-content:center}#about .row .right button{margin:0 auto}#skills ul{grid-template-columns:repeat(4,1fr)}#skills ul li{padding-bottom:35px}#experience .row{flex-direction:column;gap:40px}#portfolio .row{grid-template-columns:repeat(2,1fr)}#contact .row{flex-direction:column}#contact .row ul{margin-bottom:30px}#contact .row form button{margin:0 auto}.footer{padding-bottom:100px}.footer .footer-row .footer-item{flex-direction:column;align-items:flex-start;gap:20px}.footer .footer-row .footer-item .simple-footer{text-align:start}.footer .footer-row .footer-item .footer-list ul{flex-direction:column;align-items:flex-start;gap:20px}.footer .footer-row .footer-item .footer-list ul li{margin-right:0}}@media only screen and (max-width:578px){.header{padding:11px 0;border-bottom:1px solid rgba(0,0,0,.1)}#sosial{top:185px}.logo{font-size:20px!important}.top-titles{padding-top:56px;line-height:35px}.top-titles h4{font-size:20px}.top-titles h3{font-size:25px}.global-btn{font-size:18px;padding:8px 20px}#hero{padding-top:65px;margin-top:15px;padding-left:0;padding-right:0}#hero .row .right{height:230px;width:230px}#hero .row .right img{height:230px}#hero .row .left h1{font-size:25px;margin-bottom:5px}#hero .row .left h3{font-size:18px;margin-bottom:5px}#hero .row .left p{font-size:15px;line-height:23px;max-width:340px}#about .row{padding-top:25px}#about .row .left{width:100%;padding:10px 10px 0}#about .row .left img{width:100%;height:240px}#about .row .left:after{top:10px;width:100%;height:240px}#about .row .right{margin-top:20px;width:100%}#about .row .right p{font-size:16px;line-height:25px}#about .row .right ul{justify-content:center}#about .row .right ul li{line-height:30px;font-size:28px}#about .row .right ul li span{font-size:20px!important;font-weight:500}#about .row .right ul li span.count{font-size:25px!important}#about .row .right button{margin:0 auto}#skills ul{padding-top:25px;grid-template-columns:repeat(3,1fr);gap:25px 15px}#skills ul li{padding-bottom:25px}#skills ul li span{font-size:12px;bottom:-13px}#skills ul li img{height:40px}#experience .row{padding-top:25px;gap:25px}#experience .row .left ul{flex-direction:column;align-items:flex-start!important;justify-content:flex-start!important}#experience .row .left ul li .decs{font-size:16px}#experience .row .left .item .item-title{font-size:18px;margin-bottom:0}#experience .row .left .title{font-size:20px;margin-bottom:0}#experience .row .left .title svg{width:30px;height:30px}#experience .row .right ul{flex-direction:column;align-items:flex-start!important;justify-content:flex-start!important}#experience .row .right ul .decs{font-size:16px}#experience .row .right .item .item-title{font-size:18px}#experience .row .right .title{font-size:23px;margin-bottom:0}#experience .row .right .title svg{width:30px;height:30px}#portfolio ::-webkit-scrollbar{height:0}#portfolio .tabs-menu{white-space:nowrap;overflow:auto;justify-content:flex-start;max-width:100%;margin-bottom:20px;padding-top:25px}#portfolio .tabs-menu li button{font-size:18px;padding:10px 15px}#portfolio .row{grid-template-columns:repeat(1,1fr)}#portfolio-card .lazy-load-image-background,#portfolio-card .lazy-load-image-background img{height:190px}#portfolio-card .portfolio-desc .portfolio-name{font-size:20px}#portfolio-card .portfolio-desc .links a{font-size:16px}#contact .row{padding-top:25px;padding-left:0;padding-right:0}#contact .row ul{width:100%}#contact .row ul li div .title{font-size:20px!important}#contact .row ul li div a,#contact .row ul li div span{font-size:16px}#contact .row ul li svg{margin-top:5px;width:30px;height:30px;margin-right:23px}#contact .row form input,#contact .row form textarea{font-size:17px;padding:15px}#contact .row form input::placeholder,#contact .row form textarea::placeholder{font-size:17px}.footer{margin-top:50px}.footer .footer-row .footer-item .footer-title{font-size:25px}.footer .footer-row .footer-item .simple-footer{text-align:start;font-size:18px}}