*{margin:0;padding:0;box-sizing:border-box;outline:none;border:none;text-decoration:none;list-style:none;scroll-behavior:smooth}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;color-scheme:light dark;color:#ffffffde;background-color:var(--White);--orange: hsl(35, 80%, 50%);--white: hsl(0, 0%, 100%);--WHITE: hsl(0, 0%, 100%);--BLACK: hsl(0, 0%, 0%);--black-90: hsl(0, 0%, 10%);--black-70: hsl(0, 0%, 30%);--black-alpha-40: hsla(0, 0%, 0%, .4);--color-1: #00C82C;--color-2: #C80000;--color-3: #C4C800;--color-4: #9400C8;--select-box-bg-color: hsl(0, 0%, 100%);--border-box-1: hsl(0, 0%, 90%);--border-color-1: hsl(240, 9%, 25%);--border-color-2: hsl(240, 9%, 30%);--primary-color: #003d99;--primary-sdw: #0075FF;--secondary-color: #E4E4E4;--White: #FFFFFF;--sdw: rgba(0, 0, 0, .34)}.bacground{background-color:var(--primary-color)}.primary{color:var(--primary-color)}.btn-primary{color:#ffffffb0;background-color:var(--primary-color);border:1.5px solid var(--primary-color);border-radius:50px;font-weight:500;text-transform:capitalize;padding:4px 12px;transition:background-color .3s ease,border-color .3s ease,color .3s ease;cursor:pointer}.btn-primary:hover{background-color:var(--White);border:1.5px solid var(--primary-color);color:var(--primary-color);font-weight:500}.btn-secondary{color:var(--black-70);background-color:var(--White);border:1.5px solid var(--primary-color);border-radius:50px;font-weight:600;text-transform:capitalize;padding:6px 12px;transition:background-color .3s ease,border-color .3s ease,color .3s ease;cursor:pointer}.btn-secondary:hover{background-color:var(--primary-sdw);border:1.5px solid var(--White);color:var(--White);font-weight:600}body{margin:0;min-height:100vh;color:#000}.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;color:var(--BLACK);font-size:20px;background-color:#e4e4e4b3;position:fixed;top:0;width:100%;z-index:1000;box-shadow:0 5px 20px var(--black-alpha-40)}.navbar .navbar-logo{color:var(--BLACK);padding:10px;position:relative;left:50px;font-weight:700;cursor:text;font-family:Poppins,sans-serif}.navbar .navbar-logo span{color:var(--primary-sdw)}.navbar-nav{display:flex;list-style:none;padding:0;position:relative;right:50px}.navbar .navbar-nav .nav-link{color:var(--BLACK);text-decoration:none;margin-left:80px;font-family:Urbutus Slab,serif}.navbar .navbar-nav .nav-link:hover{color:var(--primary-sdw)}.navbar .navbar-nav .nav-link:after{content:"";display:block;padding-bottom:.5rem;font-weight:700;border-bottom:.1rem solid var(--primary-sdw);transform:scaleX(0);transition:.3s linear}.navbar .navbar-nav .nav-link:hover:after{transform:scaleX(.5)}.close-menu{position:absolute;top:10px;right:20px;font-size:24px;cursor:pointer;z-index:1002}.navbar-hamburger{display:none;font-size:24px;cursor:pointer;position:absolute;right:20px;z-index:1001}.hero-section{display:flex;margin-top:150px;padding:20px}.hero-left{flex:1.8;padding:10px;margin:0 50px;color:var(--black-90);position:relative;top:45px;right:-50px}.hero-left h1{color:var(--primary-color);margin-bottom:10px;font-size:36px;font-family:Roboto,sans-serif}.hero-left .special{font-family:Poppins,sans-serif}.hero-left .special span{color:var(--primary-sdw);font-weight:700}.hero-left .special .typing-text{display:inline-block;overflow:hidden;white-space:nowrap;margin:0;letter-spacing:.15em;animation:typing 3s steps(20,end),blink-caret .75s step-end infinite;position:relative;top:4px;font-size:12px}@keyframes typing{0%{width:0}to{width:50%}}@keyframes blink-caret{0%,to{border-color:transparent}}.btn-primary{animation:none}.hero-left .dis{color:var(--black-70);font-weight:700;margin-bottom:15px;font-size:12px}.btn{position:relative;top:20px}.hero-right{flex:2;padding:20px;position:relative;left:-50px}.heroimage1,.heroimage2,.heroimage3{width:210px;height:auto;position:absolute;top:70%;transform:translateY(-50%)}.heroimage1{left:70px}.heroimage2{left:50%;transform:translate(-50%) translateY(-50%);z-index:1}.heroimage3{right:70px;z-index:-1}.experience{display:flex;margin-top:200px;color:var(--black-70);box-shadow:0 0 10px 3px var(--black-alpha-40);background-color:var(--secondary-color)}.experience .information{flex:2;padding:40px;margin:0 50px;color:var(--black-90);position:relative;top:10px;right:-50px}.experience .information .opsi{display:flex;align-items:center;margin-right:20px;background-color:var(--White);color:var(--BLACK);width:400px;height:75px;margin-bottom:20px;border-radius:10px;box-shadow:10px 10px 10px #00000012}.experience .information .opsi p,.experience .information .opsi span{margin-left:80px;text-align:center;font-weight:700}.experience .information .opsi .a{margin-left:70px;text-align:center;font-weight:700}.experience .information .opsi .b{margin-left:135px;text-align:center;font-weight:700}.project-count{position:absolute;left:80px;top:25px}.experience .information .opsi .logo{width:50px;height:50px;border-radius:50%;background-color:var(--black-90);position:relative;left:30px;color:var(--White)}.experience .information .opsi .logo .fa-solid{position:absolute;top:14px;left:11px;font-size:25px}.experience .information .opsi .logo .fa-brands{position:absolute;top:13px;left:16px;font-size:25px}.experience .information .opsi .logo .fa-code{position:absolute;top:12px;left:9px;font-size:25px}.experience .help{flex:1.2;padding:40px;position:relative;left:-100px;top:20px}.experience .help h1{text-align:center;margin-bottom:20px;position:relative;left:-40px;color:var(--BLACK)}.experience .help p{font-size:13px;margin-bottom:10px}.box{display:flex;justify-content:space-between;align-items:center;margin-top:20px;color:var(--BLACK)}.complate,.on-going{flex:1;position:relative;top:-10px}.box .complate p,.box .on-going p{flex:1;font-size:13px;font-weight:500}.complate h2,.on-going h2{flex:1;font-size:30px}.complate{margin-right:10px;position:relative}.on-going{position:relative;left:-30px}.section-portfolio{margin-top:120px;padding:10px 50px}.section-portfolio .project-content .title{width:450px;position:relative;left:60px}.section-portfolio .project-content .title h1{margin-bottom:5px}.section-portfolio .project-content .title .dis{font-weight:700;color:var(--black-70)}.section-portfolio .project-content .explore{position:relative;top:170px;left:190px;background-color:var(--White);color:var(--black-70);border-bottom:1.5px solid var(--black-70);z-index:1}.section-portfolio .project-content .explore a{background-color:var(--White);color:var(--black-70);border-bottom:1.5px solid var(--black-70)}.section-portfolio .project-content .explore a:hover{background-color:var(--White);color:var(--primary-sdw);border-bottom:1.5px solid var(--primary-sdw);cursor:pointer}.section-portfolio .project-content .explore i{margin-left:10px}.project{display:flex;justify-content:flex-end;align-items:center;position:relative;right:120px;top:-150px}.right-column{display:flex;flex-direction:column}.box-content{width:300px;height:400px;background-color:var(--White);margin:20px;box-shadow:-10px 7px 20px 5px var(--black-alpha-40)}.mini-games{position:absolute;bottom:150px;right:490px;text-align:center;font-size:20px;font-weight:700;color:var(--BLACK);padding-top:190px}.big-project{margin-bottom:70px;text-align:center;font-size:20px;font-weight:700;color:var(--BLACK);padding-top:50%}.comingsoon{text-align:center;font-size:20px;font-weight:700;padding-top:50%;color:var(--black-70)}.tittle-prc{width:550px;position:relative;top:-230px;left:80px}.tittle-prc .in-p{font-size:24px;margin-bottom:10px}.tittle-prc p{font-size:14px;color:var(--black-70)}.work-prcss{display:flex;flex-wrap:wrap;justify-content:space-between;position:relative;top:-150px;padding:0 20px}.prcss-box{width:calc(33.33% - 20px);padding:20px 0;margin-bottom:20px;box-sizing:border-box}.prcss-box h1{font-size:14px;margin-bottom:10px}.prcss-box p{font-size:10px}.prcss-box:nth-child(1){border-bottom:3px solid var(--color-1)}.prcss-box:nth-child(2){border-bottom:3px solid var(--color-2)}.prcss-box:nth-child(3){border-bottom:3px solid var(--color-3)}.prcss-box:nth-child(4){border-bottom:3px solid var(--color-4);position:relative;left:60px}.prcss-box:nth-child(5){border-bottom:3px solid var(--color-1);position:relative;right:60px}.prcss-box:nth-child(4),.prcss-box:nth-child(5){flex-basis:33.33%;margin-left:auto;margin-right:auto}@media screen and (max-width: 768px){.work-prcss{flex-direction:column}.prcss-box{width:100%}.prcss-box:nth-child(4),.prcss-box:nth-child(5){width:100%;margin-left:0;margin-right:0}}.about-section{display:flex;justify-content:space-between;align-items:flex-start;color:var(--White);position:relative;bottom:70px}.content-left{width:50%;padding:20px;margin-left:100px;text-align:center}.about-section .content-left .profile .photo .photo-profile{width:350px;margin-bottom:40px;position:relative;left:20px;top:-10px}.about-section .content-left .profile .info-content{text-align:center;color:var(--BLACK)}.about-section .content-left .profile .info-content .gmail{color:var(--black-70);font-weight:500}.about-section .content-left .profile .info-content .gmail:hover{color:var(--primary-sdw)}.about-section .content-left .profile .button{margin-top:40px}.about-section .content-left .profile .button .bx{margin-left:10px}.content-right{width:50%;padding:20px;margin-right:100px}.content-right .about{padding:20px}.content-right .about h1{font-size:32px;font-family:Urbutus Slab,serif;color:var(--BLACK)}.content-right .about .icon{color:var(--color-1);margin-top:8px;font-weight:600;margin-bottom:20px}.content-right .about .icon .bx{position:relative;top:1px;margin-right:7px}.content-right .about .about-me-content p{line-height:25px;font-size:14px;font-weight:300;color:var(--black-70);margin-bottom:15px}.content-right .roles{padding:20px 20px 20px 25px}.content-right .roles h1{font-size:32px;font-family:Urbutus Slab,serif;margin-bottom:20px;color:var(--BLACK)}.content-right .roles .main-apps h3{font-size:14px;font-family:Urbutus Slab,serif;margin-bottom:15px;color:var(--BLACK)}.content-right .roles .main-apps .AP{display:flex;align-items:center;margin-bottom:10px}.content-right .roles .main-apps .AP .iconify{font-size:36px}.content-right .roles .main-apps .AP .app-info.figma{font-size:36px;margin-left:42px}.content-right .roles .main-apps .AP .app-info{margin-left:30px;font-family:Poppins,sans-serif}.content-right .roles .main-apps .AP .app-info h2{font-size:16px;color:var(--BLACK)}.content-right .roles .main-apps .AP .app-info p{font-size:12px;font-weight:600;color:var(--black-70)}.content-right .roles .skill h3{font-size:14px;font-family:Urbutus Slab,serif;margin-bottom:15px;margin-top:20px;color:var(--BLACK)}.content-right .roles .main-skill{display:inline-flex;align-items:center;margin-right:10px;font-size:32px;margin-left:10px;position:relative;right:10px}.profile,.about,.roles{width:100%;height:300px;background-color:var(--secondary-color);margin-bottom:20px;border-radius:10px}.profile{order:1;height:640px}.about{order:2;margin-bottom:40px}.roles{order:3}.footer{background-color:#e4e4e4b3;padding:15px;box-shadow:0 5px 20px var(--black-alpha-40);border-top-left-radius:35px;border-top-right-radius:35px;text-align:center;font-family:Poppins,sans-serif;color:var(--black-70)}.contacttt{min-height:100vh}.head{width:200px;height:30px;background-color:var(--White);border:1.2px solid var(--primary-color);position:relative;top:-65px;left:42%;z-index:10;border-radius:50px;padding:5px 0;color:var(--black-70);font-family:inter,sans-serif;text-align:center;font-weight:600}.a-con{width:50px;height:50px;border-radius:50%;background-color:var(--primary-sdw);position:relative;color:var(--White);text-align:center;padding-top:13px;left:-20px}.a-con .fas{font-size:22px}.container{display:flex;justify-content:space-between;max-width:1000px;margin:50px auto;padding:50px;background-color:var(--White);border-radius:5px;box-shadow:8px 12px 10px #0006;position:relative;top:100px;border-left:1px solid var(--primary-color);border-top:1px solid var(--primary-color);border-right:1px solid var(--primary-sdw);border-bottom:1px solid var(--primary-sdw)}.left{flex:1;padding-right:20px}.right{flex:1;padding-left:20px;position:relative;right:50px}.right h2{position:relative;top:-5px}form{display:flex;flex-direction:column;position:relative;margin-top:30px}input,textarea{padding:10px;margin-bottom:30px;border:2px solid var(--border-box-1);border-radius:5px;font-size:16px;background-color:transparent;box-shadow:5px 5px 10px var(--black-70);color:var(--BLACK)}.button-1{padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:16px;position:relative;top:-5px}.button-1:hover{background-color:#0056b3}.contact-items{display:flex;flex-direction:column}.contact-item{display:flex;align-items:center;margin-bottom:30px;position:relative;top:82px;margin-left:10px;right:150px}.contact-item a{cursor:pointer}.contact-item>div{flex:1}.contact-item h3{font-size:16px;font-weight:600}.contact-item p{font-size:11px}.contact-item h3,.contact-item p{margin:0}.services{display:grid;align-items:center;justify-items:center;min-height:100vh}.services-content{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:5rem;padding-bottom:50px;justify-content:center}.boxx{background-color:var(--primary-sdw);padding:20px 30px;border-radius:8px;transition:all .45s ease;text-align:center;width:250px;height:250px;box-shadow:5px 5px 10px var(--black-70)}.services-content .boxx{display:flex;flex-direction:column;align-items:center}.s-icon i{font-size:32px;position:relative;top:70px;display:flex;align-items:center;justify-content:center;color:var(--White);text-shadow:2px 2px 4px var(--black-70)}.boxx h3{font-size:24px;font-weight:600;color:var(--White);position:relative;top:90px;text-align:center;text-shadow:2px 2px 4px var(--black-70)}.boxx:hover{transform:translateY(-8px);cursor:pointer}.main-text{text-align:center;position:relative;top:130px}.main-text h2 span{color:var(--primary-sdw)}.portfolio-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,auto));align-items:center;justify-content:center;gap:2rem;min-height:100vh;position:relative;top:20px;margin-bottom:-30px}.row{position:relative;overflow:hidden;border-radius:8px;cursor:pointer}.portfolio-content .row img{width:100%;height:15rem;border-radius:8px;display:block;transition:transform .5s}.layer{width:100%;height:0;background:linear-gradient(#0000001a,#0075ff);position:absolute;border-radius:8px;left:0;bottom:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 40px;transition:height .5s}.layer i{color:var(--BLACK);margin-top:20px;font-size:20px;background:var(--White);width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%}.row:hover img{transform:scale(1.1)}.row:hover .layer{height:100%}@media (max-width: 1132px){.hero-left h1{font-size:26px}.hero-left .dis{font-size:10px}.hero-left .special{font-size:11.5px}.hero-left .special span{font-size:10px}.hero-left .special .typing-text{font-size:9px;position:relative;top:4px}.hero-left .btn-primary{font-size:10px;position:relative;top:10px}.hero-right{left:-50px}.heroimage1,.heroimage2,.heroimage3{width:180px;position:absolute;top:80%}.experience .information{padding:30px}.experience .information .opsi .logo .fa-solid{font-size:20px;left:13px;top:16px}.experience .information .opsi p{font-size:15px}.experience .help h1{font-size:28px}.experience .help p{font-size:12px}.complate h2,.on-going h2{font-size:28px}.box .complate p,.box .on-going p{flex:1;font-size:10px;font-weight:500}.section-portfolio .project-content .title .dis{font-size:14px}.section-portfolio .project-content .title h1{font-size:26px;margin-bottom:5px}.section-portfolio .project-content .title p{font-size:15px}.tittle-prc{width:490px}.tittle-prc .in-p{font-size:22px}.tittle-prc p{font-size:12px}.about-section .content-left .profile .photo .photo-profile{width:270px;margin-top:30px}.about-section .content-left .profile .info-content{font-size:13px}.about-section .content-left .profile .button{font-size:11px;margin-top:30px}.content-right .about h1{font-size:28px}.content-right .about .icon{font-size:14px}.content-right .about .icon .bx{font-size:14px;position:relative;top:2px;left:2px}.content-right .about .about-me-content p{line-height:23px;font-size:12.5px;position:relative;top:12px}.content-right .roles h1{font-size:26px}.content-right .roles .main-apps h3,.content-right .roles .main-apps .AP .app-info h2{font-size:14px}.content-right .roles .main-apps .AP .app-info p{font-size:11px}.content-right .roles .main-apps .AP .iconify{font-size:32px}.content-right .roles .main-apps .AP .app-info.figma{font-size:32px;margin-left:42px}.content-right .roles .main-skill{font-size:28px}.footer{font-size:14px}}@media (max-width: 991px){.navbar .navbar-logo{font-size:24px}.navbar .navbar-nav .nav-link:hover{color:var(--primary-sdw)}.navbar .navbar-nav .nav-link:after{content:"";display:block;padding-bottom:.5rem;font-weight:700;border-bottom:.1rem solid var(--primary-sdw);transform:scaleX(0);transition:.3s linear;position:relative;left:-37px}.navbar .navbar-nav .nav-link:hover:after{transform:scaleX(.5)}.navbar .navbar-nav{display:none}.navbar-hamburger{display:block}.navbar-nav.active{display:flex;flex-direction:column;position:fixed;top:0;right:0;height:100%;width:250px;background-color:#e4e4e4e6;box-shadow:-2px 0 5px #00000080;padding-top:60px;z-index:999}.navbar-nav .nav-link{margin:10px 20px;text-align:left}.close-menu{top:12px}.experience .information .opsi{display:flex;align-items:center;margin-right:20px;background-color:var(--White);color:var(--BLACK);width:340px;height:65px;margin-bottom:20px;border-radius:10px;box-shadow:10px 10px 10px #00000012}.experience .information .opsi .logo{width:45px;height:45px;border-radius:50%;background-color:var(--black-90);position:relative;left:30px;color:var(--White)}.experience .information .opsi .logo .fa-solid{position:absolute;top:15px;left:14px;font-size:16px}.experience .information .opsi .logo .fa-brands{position:absolute;top:13px;left:16px;font-size:18px}.experience .information{padding:30px}.experience .information .opsi p{font-size:11px}.experience .help h1{font-size:24px;left:-30px}.experience .help p{font-size:11px}.complate h2,.on-going h2{font-size:26px}.box .complate p,.box .on-going p{flex:1;font-size:10px;font-weight:500}.section-portfolio .project-content .explore{position:relative;top:115px;left:130px}.project{position:relative;left:-70px}.mini-games{position:absolute;bottom:150px;right:390px;padding-top:160px}.section-portfolio .project-content .title .dis{font-size:10px}.section-portfolio .project-content .title h1{font-size:22px;margin-bottom:5px}.section-portfolio .project-content .title p{font-size:12px}.tittle-prc{width:420px}.tittle-prc .in-p{font-size:20px}.tittle-prc p{font-size:10px}.prcss-box h1{font-size:12px}.prcss-box p{font-size:9px}.box-content{width:240px;height:340px}.about-section{display:flex;justify-content:space-between;align-items:flex-start;color:var(--White);position:relative;bottom:70px}.content-left{width:50%;padding:20px}.about-section .content-left .profile .photo .photo-profile{width:290px;position:relative;top:-20px}.about-section .content-left .profile .info-content{font-size:11px;position:relative;top:-20px}.about-section .content-left .profile .info-content .gmail:hover{color:var(--primary-sdw)}.about-section .content-left .profile .button{margin-top:10px;font-size:8px}.content-right .about h1{font-size:24px}.content-right .about .icon{font-size:12px}.content-right .about .icon .bx{font-size:12px;position:relative;top:2px;left:2px}.content-right .about .about-me-content p{line-height:20px;font-size:10px;position:relative;top:12px}.content-right .roles h1{font-size:22px}.content-right .roles .main-apps h3,.content-right .roles .main-apps .AP .app-info h2{font-size:12px}.content-right .roles .main-apps .AP .app-info p{font-size:10px}.content-right .roles .main-apps .AP .iconify{font-size:28px;margin-left:5px}.content-right .roles .main-apps .AP .app-info.figma{font-size:28px;margin-left:42px}.content-right .roles .main-skill{font-size:20px}.profile,.about,.roles{width:100%;height:260px;background-color:var(--secondary-color);margin-bottom:20px;border-radius:10px}.profile{height:540px}.head{top:-64px;left:41%}.container{max-width:860px}}@media (max-width: 767px){.navbar .navbar-logo{font-size:16px}.close-menu{top:9px}.hero-left{right:-10px}.hero-left h1{font-size:21px}.hero-left .dis{font-size:9px}.hero-left .special{font-size:11.5px}.hero-left .special span{font-size:9px}.hero-left .special .typing-text{font-size:8px;position:relative;top:3px}.hero-left .btn-primary{font-size:9px;position:relative;top:10px}.hero-right{left:-30px}.heroimage1,.heroimage2,.heroimage3{width:160px;position:absolute;top:80%}.heroimage1{left:20px}.heroimage3{right:20px}.experience .information{right:-10px;top:10px}.experience .information .opsi{width:260px;height:60px}.experience .information .opsi .logo{width:45px;height:40px}.experience .information .opsi .logo .fa-solid{position:absolute;top:14px;left:14px;font-size:15px}.experience .information .opsi .logo .fa-brands{position:absolute;top:13px;left:16px;font-size:18px}.experience .information{padding:20px}.experience .information .opsi p{margin-left:70px;font-size:10px}.experience .information .opsi p span{display:none}.experience .help{top:10px;left:-50px;flex:1.9}.experience .help h1{font-size:20px;left:-5px;top:10px}.experience .help p{font-size:9.5px;position:relative;left:14px}.complate h2,.on-going h2{font-size:22px;position:relative;left:15px}.box .complate p,.box .on-going p{flex:1;font-size:8px;font-weight:500;position:relative;left:15px}.section-portfolio .project-content .explore{position:relative;top:115px;left:110px;font-size:10px}.project{position:relative;left:-10px;top:-100px}.mini-games{position:absolute;bottom:150px;right:290px;padding-top:130px}.section-portfolio .project-content .title .dis{font-size:9px;margin-bottom:10px}.section-portfolio .project-content .title h1{font-size:18px;margin-bottom:5px}.section-portfolio .project-content .title p{font-size:10px}.tittle-prc{width:340px;margin-top:20px}.tittle-prc .in-p{font-size:16px}.tittle-prc p{font-size:9px}.prcss-box h1{font-size:10px}.prcss-box p{font-size:8px}.box-content{width:180px;height:280px}.work-prcss{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 20px}.prcss-box{width:100%;margin:0}.prcss-box:nth-child(4){grid-column:1}.prcss-box:nth-child(5){grid-column:3}.about-section{display:flex;justify-content:space-between;align-items:flex-start;color:var(--White);position:relative;bottom:70px}.content-left{width:50%;padding:20px}.about-section .content-left .profile .photo .photo-profile{width:180px;position:relative;top:10px}.about-section .content-left .profile .info-content{font-size:8px;position:relative;top:-15px}.about-section .content-left .profile .info-content .gmail:hover{color:var(--primary-sdw)}.about-section .content-left .profile .button{margin-top:6px;font-size:6px}.content-right .about h1{font-size:18px}.content-right .about .icon{font-size:10px}.content-right .about .icon .bx{font-size:10px;position:relative;top:2px;left:2px}.content-right .about .about-me-content p{line-height:12px;font-size:7px;position:relative;top:-5px;margin-bottom:8px}.content-right .roles .skill h3{font-size:9px;margin-bottom:10px;margin-top:15px}.content-right .roles h1{font-size:16px;margin-bottom:8px;position:relative;top:-5px}.content-right .roles .main-apps h3{font-size:9px;margin-bottom:10px}.content-right .roles .main-apps .AP .app-info h2{font-size:8px}.content-right .roles .main-apps .AP .app-info p{font-size:7px}.content-right .roles .main-apps .AP .iconify{font-size:20px;margin-left:3px}.content-right .roles .main-apps .AP .app-info.figma{font-size:22px;margin-left:38px}.content-right .roles .main-skill{font-size:14px;position:relative;left:-10px;top:-2px}.profile,.about,.roles{width:100%;height:200px;background-color:var(--secondary-color);margin-bottom:20px;border-radius:10px}.profile{height:420px}.head{position:absolute;top:-3%;left:28%;font-size:12px;height:25px;width:280px}.container{max-width:640px;position:relative;top:140px}.contact-item{position:relative;top:75px;margin-left:10px;right:-10px;width:180px}.contact-item h3{font-size:12px;font-weight:600}.contact-item p{font-size:9px}.a-con{width:40px;height:40px}.a-con .fas{font-size:18px;position:relative;bottom:3px}form input{margin-top:10px;height:35px}input,textarea{padding:10px;margin-bottom:20px;height:60px}.right{position:relative;right:20px}.right h2{font-size:18px;top:25px}.left{position:relative;top:-5px}.button-1{padding:5px 10px}.footer{position:relative;top:48px}.boxx{width:200px;height:200px}.s-icon i{top:50px}.boxx h3{top:70px}.portfolio-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,auto));align-items:center;justify-content:center;gap:5px;min-height:100vh;position:relative;top:20px;margin-bottom:-30px}.portfolio-content .row img{width:100%;height:15rem;border-radius:8px;display:block;transition:transform .5s}.layer{width:100%;height:0;background:linear-gradient(#0000001a,#0075ff);position:absolute;border-radius:8px;left:0;bottom:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 40px;transition:height .5s}.pjk{width:280px;height:280px;position:relative;left:38px}}@media (max-width: 500px){.close-menu{top:10px}.hero-section{flex-direction:column;align-items:center;margin-top:70px;padding:10px}.hero-left{flex-grow:1;padding:5px;margin:0 0 50px;text-align:center;position:static;display:flex;position:relative;top:55px;right:5px;flex-direction:column;align-items:center;justify-content:center}.hero-left h1{font-size:16px}.hero-left .dis{font-size:8px}.hero-left .special{font-size:11.5px}.hero-left .special span{font-size:9px}.hero-left .special .typing-text{letter-spacing:.15em;animation:typing 3s steps(20,end),blink-caret .75s step-end infinite;position:relative;top:3px;font-size:8px}@keyframes typing{0%{width:0}to{width:40%}}@keyframes blink-caret{0%,to{border-color:transparent}}.hero-left .btn-primary{font-size:7px;position:relative;top:10px}.hero-right{display:none}.experience{flex-direction:column;align-items:center;margin-top:80px;padding:10px;display:flex}.experience .information{display:none}.experience .help{padding:5px;margin:0;text-align:center;position:static;display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;top:10px;left:-15px}.experience .help h1{font-size:16px;left:15px;top:10px}.experience .help p{font-size:8px;position:relative;left:14px}.complate h2,.on-going h2,.box .complate p,.box .on-going p{display:none}.section-portfolio{display:grid}.section-portfolio .project-content .explore{position:relative;top:-40px;left:-10px;font-size:10px}.tittle-prc,.project{display:none}.section-portfolio .project-content .title{width:310px;position:relative;left:-10px;top:-60px}.section-portfolio .project-content .title .dis{font-size:8px;margin-bottom:10px}.section-portfolio .project-content .title h1{font-size:16px;margin-bottom:5px}.section-portfolio .project-content .title p{font-size:8.5px}.mini-games,.big-project{font-size:14px}.comingsoon{font-size:1px}.work-prcss{display:none}.about-section{display:flex;justify-content:space-between;align-items:flex-start;color:var(--White);position:relative;bottom:20px;margin-top:50px}.content-left{width:50%;padding:20px;margin-left:0}.about-section .content-left .profile .photo .photo-profile{width:160px;position:relative;top:-10px;padding-right:7px}.about-section .content-left .profile .info-content{font-size:6px;position:relative;top:-25px}.about-section .content-left .profile .info-content .gmail:hover{color:var(--primary-sdw)}.about-section .content-left .profile .button{position:relative;top:-10px;font-size:4px}.content-right .about{padding:10px}.content-right .about h1{font-size:12px;padding-left:10px;padding-top:10px}.content-right .about .icon{font-size:8px;padding-left:7px;margin-bottom:20px;position:relative;top:-3px}.content-right .about .icon .bx{font-size:8px;position:relative;top:1px;left:2px}.content-right .about .about-me-content p{line-height:8px;font-size:5px;position:relative;top:-3px;margin-bottom:6px;padding-left:5px}.content-right .roles{padding:20px 0 20px 25px}.content-right .roles .skill h3{font-size:7px;margin-bottom:10px;margin-top:15px}.content-right .roles h1{font-size:10px;margin-bottom:3px;top:-5px}.content-right .roles .main-apps h3{font-size:7px;margin-bottom:10px}.content-right .roles .main-apps .AP .app-info h2{font-size:5px}.content-right .roles .main-apps .AP .app-info p{font-size:4px}.content-right .roles .main-apps .AP .iconify{font-size:12px;margin-left:3px}.content-right .roles .main-apps .AP .app-info.figma{font-size:22px;margin-left:34px}.content-right .roles .main-skill{font-size:10px;position:relative;left:-5px;top:-2px;margin:0 4px}.profile,.about,.roles{width:100%;height:160px;background-color:var(--secondary-color);margin-bottom:20px;border-radius:10px}.profile{height:340px;position:relative;left:20px}.about,.roles{width:160px}.head{position:absolute;top:-4%;left:35%;font-size:8px;width:100px;height:22px}.container{max-width:340px;position:relative;top:200px;height:300px}.left{padding-right:5px;position:relative;left:20px}.right{padding-left:5px;position:relative;left:20px}.contact-item{position:relative;top:55px;margin-left:10px;right:20px;width:80px;margin-bottom:20px}.contact-item h3{font-size:7px;font-weight:600}.contact-item p{font-size:4px}.a-con{width:30px;height:30px}.a-con .fas{font-size:12px;position:relative;bottom:8px}form input{margin-top:5px;height:25px;width:120px}input,textarea{padding:10px;margin-bottom:20px;height:40px;width:120px;font-size:8px}.right h2{font-size:12px;top:25px}.left{position:relative;top:-5px}.button-1{padding:4px 8px;font-size:10px}.footer{padding:10px}.footer p{font-size:10px}.services-content{gap:1rem}.boxx{width:100px;height:100px}.s-icon i{top:15px;font-size:16px}.boxx h3{top:30px;font-size:6.5px}.portfolio-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,auto));align-items:center;justify-content:center;gap:1px;min-height:100vh;position:relative;top:20px;margin-bottom:-30px;margin-top:150px}.portfolio-content .row{width:70%;height:12rem}.portfolio-content .row img{width:100%;height:15rem;border-radius:8px;display:block;transition:transform .5s}.layer{width:100%;height:0;background:linear-gradient(#0000001a,#0075ff);position:absolute;border-radius:8px;left:0;bottom:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 40px;transition:height .5s}.pjk{width:280px;height:280px;position:relative;left:58px}}@media (max-width: 397px){.close-menu{top:7px}.hero-section{flex-direction:column;align-items:center;margin-top:70px;padding:10px}.hero-left{flex-grow:1;padding:5px;margin:0 0 50px;text-align:center;position:static;display:flex;position:relative;top:55px;right:5px;flex-direction:column;align-items:center;justify-content:center}.hero-left h1{font-size:16px}.hero-left .dis{font-size:8px}.hero-left .special{font-size:11.5px}.hero-left .special span{font-size:9px}.hero-left .special .typing-text{letter-spacing:.15em;animation:typing 3s steps(20,end),blink-caret .75s step-end infinite;position:relative;top:3px;font-size:8px}@keyframes typing{0%{width:0}to{width:40%}}@keyframes blink-caret{0%,to{border-color:transparent}}.hero-left .btn-primary{font-size:7px;position:relative;top:10px}.hero-right{display:none}.experience{flex-direction:column;align-items:center;margin-top:80px;padding:10px;display:flex}.experience .information{display:none}.experience .help{padding:5px;margin:0;text-align:center;position:static;display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;top:10px;left:-15px}.experience .help h1{font-size:16px;left:15px;top:10px}.experience .help p{font-size:8px;position:relative;left:14px}.complate h2,.on-going h2,.box .complate p,.box .on-going p{display:none}.section-portfolio{display:grid}.section-portfolio .project-content .explore{position:relative;top:-40px;left:-10px;font-size:10px}.tittle-prc,.project{display:none}.section-portfolio .project-content .title{width:310px;position:relative;left:-10px;top:-60px}.section-portfolio .project-content .title .dis{font-size:8px;margin-bottom:10px}.section-portfolio .project-content .title h1{font-size:16px;margin-bottom:5px}.section-portfolio .project-content .title p{font-size:8.5px}.work-prcss{display:none}.about-section{display:flex;justify-content:space-between;align-items:flex-start;color:var(--White);position:relative;bottom:20px;margin-top:50px}.content-left{margin-left:0}.about-section .content-left .profile .photo .photo-profile{width:160px;position:relative;left:15px;top:-10px;padding-right:7px}.about-section .content-left .profile .info-content{font-size:6px;position:relative;top:-25px}.about-section .content-left .profile .info-content .gmail:hover{color:var(--primary-sdw)}.about-section .content-left .profile .button{position:relative;top:-10px;font-size:4px}.content-right{margin-right:0}.content-right .about{padding:10px}.content-right .about h1{font-size:12px;padding-left:10px;padding-top:10px}.content-right .about .icon{font-size:8px;padding-left:7px;margin-bottom:20px;position:relative;top:-3px}.content-right .about .icon .bx{font-size:8px;position:relative;top:1px;left:2px}.content-right .about .about-me-content p{line-height:8px;font-size:5px;position:relative;top:-3px;margin-bottom:6px;padding-left:5px}.content-right .roles{padding:20px 0 20px 25px}.content-right .roles .skill h3{font-size:7px;margin-bottom:10px;margin-top:15px}.content-right .roles h1{font-size:10px;margin-bottom:3px;top:-5px}.content-right .roles .main-apps h3{font-size:7px;margin-bottom:10px}.content-right .roles .main-apps .AP .app-info h2{font-size:5px}.content-right .roles .main-apps .AP .app-info p{font-size:4px}.content-right .roles .main-apps .AP .iconify{font-size:12px;margin-left:3px}.content-right .roles .main-apps .AP .app-info.figma{font-size:22px;margin-left:34px}.content-right .roles .main-skill{font-size:10px;position:relative;left:-5px;top:-2px;margin:0 4px}.profile,.about,.roles{width:100%;height:160px;background-color:var(--secondary-color);margin-bottom:20px;border-radius:10px}.profile{height:340px;position:relative;left:10px}.head{position:absolute;top:-4%;left:35%;font-size:8px;width:100px;height:22px}.container{max-width:340px;position:relative;top:240px;height:300px}.left{padding-right:5px;position:relative;left:20px}.right{padding-left:5px;position:relative;right:30px;top:-20px}.contact-item{margin-bottom:15px;top:52px;margin-left:00px;width:80px}.contact-item h3{font-size:7px;font-weight:600}.contact-item p{font-size:4px}.a-con{width:30px;height:30px}.a-con .fas{font-size:12px;position:relative;bottom:8px}form input{margin-top:5px;height:25px;width:140px}input,textarea{padding:10px;margin-bottom:20px;height:40px;width:140px;font-size:8px}.right h2{font-size:12px;top:25px}.left{position:relative;top:-5px}.button-1{padding:4px 8px;font-size:9px}.footer{padding:10px}.footer p{font-size:10px}.services-content{gap:1rem}.boxx{width:100px;height:100px}.s-icon i{top:20px;font-size:16px}.boxx h3{top:35px;font-size:6px}.portfolio-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,auto));align-items:center;justify-content:center;gap:5px;min-height:100vh;position:relative;top:20px;margin-bottom:-30px}.portfolio-content .row img{width:100%;height:15rem;border-radius:8px;display:block;transition:transform .5s}.layer{width:100%;height:0;background:linear-gradient(#0000001a,#0075ff);position:absolute;border-radius:8px;left:0;bottom:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 40px;transition:height .5s}.pjk{width:280px;height:280px;position:relative;left:78px}}@media (max-width: 362px){.about-section{display:flex;justify-content:space-between;align-items:flex-start;color:var(--White);position:relative;bottom:20px;margin-top:50px}.content-left{margin-left:0;position:relative}.about-section .content-left .profile .photo .photo-profile{width:140px;position:relative;left:15px;top:-10px}.about-section .content-left .profile .info-content{font-size:6px;position:relative;top:-25px}.about-section .content-left .profile .info-content .gmail:hover{color:var(--primary-sdw)}.about-section .content-left .profile .button{position:relative;top:-10px;font-size:4px}.content-right{margin-right:0}.content-right .about{padding:10px}.content-right .about h1{font-size:12px;padding-left:10px;padding-top:10px}.content-right .about .icon{font-size:8px;padding-left:7px;margin-bottom:20px;position:relative;top:-3px}.content-right .about .icon .bx{font-size:8px;position:relative;top:1px;left:2px}.content-right .about .about-me-content p{line-height:8px;font-size:5px;position:relative;top:-3px;margin-bottom:6px;padding-left:5px}.content-right .roles .skill h3{font-size:7px;margin-bottom:10px;margin-top:15px}.content-right .roles h1{font-size:10px;margin-bottom:3px;top:-5px}.content-right .roles .main-apps h3{font-size:7px;margin-bottom:10px}.content-right .roles .main-apps .AP .app-info h2{font-size:5px}.content-right .roles .main-apps .AP .app-info p{font-size:4px}.content-right .roles .main-apps .AP .iconify{font-size:12px}.content-right .roles .main-apps .AP .app-info.figma{font-size:22px}.content-right .roles .main-skill{font-size:10px;position:relative;left:-5px;top:-2px;margin:0 4px}.profile,.about,.roles{width:100%;height:160px;background-color:var(--secondary-color);margin-bottom:20px;border-radius:10px}.profile{height:340px;position:relative;left:10px}.container{max-width:340px;position:relative;top:340px;height:300px}.footer{padding:10px}}