*{margin:0;padding:0;box-sizing:border-box}body{background:#161513;color:#fff;font-family:outfit;display:flex;flex-direction:column}html,body{width:100%;overflow-x:hidden}.page-content{flex:1}#root,.page-wrapper{min-height:100vh;display:flex;flex-direction:column}:root{--section-gap: 80px;--title-content-gap: 20px}.about,.experiences,.projects,.contact,.mywork,.tetris{margin:var(--section-gap) 120px;display:flex;flex-direction:column;align-items:center;gap:var(--title-content-gap)}.about-title h1,.experiences-title h1,.projects-title h1,.contact-title h1,.mywork-title h1,.tetris-title h1{font-size:50px;font-weight:600;margin-bottom:var(--title-content-gap);text-align:center}.navbar{width:100%;padding:20px 0;position:relative;overflow-x:hidden}.navbar-inner{position:relative;max-width:1800px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}body{overflow-x:hidden}.nav-menu{display:flex;flex:1;flex-wrap:wrap;justify-content:center;align-items:center;list-style:none;gap:clamp(20px,3vw,90px);font-size:px;min-width:0}.header-logo{max-width:90px}.nav-connect{position:static;margin-left:auto;padding:12px 20px;border-radius:40px;background:linear-gradient(264deg,#00f,#add8e6);font-size:12px;cursor:pointer;transition:.3s ease}.nav-connect:hover{transform:scale(1.05)}.mobile-only{display:none!important}@media (max-width: 1024px){.mobile-only{display:flex!important}}.nav-menu li{display:flex;flex-direction:column;gap:5px;cursor:pointer}.nav-menu li img{display:flex;margin:auto}.anchor-link{text-decoration:none;color:#fff}.nav-mob-open,.nav-mob-close{display:none}@media (max-width: 1024px){.navbar{padding:20px clamp(12px,5vw,24px)}.navbar img:first-child{max-width:60px;height:auto}.navbar-inner{margin-left:-32px}.nav-connect{display:none}.nav-mob-open{display:block;position:absolute;top:20px;right:15px;width:30px;height:auto;cursor:pointer;z-index:5}.nav-menu{position:fixed;top:0;right:-100%;width:100%;max-width:250px;height:100%;background-color:#c3daf2f2;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:4;transition:right .5s ease;box-shadow:-4px 0 10px #0000004d;display:flex;flex-direction:column;align-items:flex-start;gap:30px;padding:0 40px 60px}.nav-mob-close{display:flex;position:absolute;top:20px;right:20px;width:30px;height:auto;cursor:pointer;z-index:999}.nav-menu li{font-size:24px;padding-left:0;flex-direction:row;gap:20px}}.hero{display:flex;align-items:center;flex-direction:column;gap:35px;margin-top:-20px;text-align:center}.hero span{background:#fff;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:clamp(2.5rem,6vw,100px);font-weight:900;margin-top:8vh;line-height:1.1;max-width:90%}.hero p{font-size:clamp(.9rem,2vw,20px);line-height:1.6;max-width:700px;margin:-20px auto 0}.react-type-animation-cursor{display:none!important;color:#121212;opacity:0!important}.hero-action{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:-10px;font-size:clamp(.9rem,2vw,18px);font-weight:500}.hero-connect,.hero-resume{padding:12px 28px;border-radius:40px;font-size:inherit;text-decoration:none;cursor:pointer}.hero-connect{background:linear-gradient(264deg,#00f,#add8e6);color:#fff;border:none}.hero-resume{border:2px solid white;color:#fff;background:none}.hero-connect:hover{transform:scale(1.05);transition:.3s}.hero-resume:hover{border-color:#00f;transition:.3s}.hero img{width:100%;max-width:260px;height:auto;margin-top:5vh}@media (max-width: 500px){.hero-connect,.hero-resume{padding:10px 20px;font-size:14px;margin:0;flex:1 1 auto;text-align:center}}.about{display:flex;flex-direction:column;align-items:center;justify-content:center}.about-title{position:relative}.about-title h1{font-size:50px;font-weight:600}.about-title img{position:absolute;bottom:0;right:0;z-index:-1;border-radius:12px}.about-sections{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;width:100%}.about-left img{height:430px;max-width:500px;border-radius:18px;margin-left:50px}.about-right{display:flex;flex-direction:column;gap:40px;max-width:600px;margin-top:24px}.about-para{display:flex;flex-direction:column;gap:16.5px;font-size:20px;font-weight:500}.about-btn{padding:10px 20px;border-radius:30px;border:2px solid #fff;cursor:pointer;color:#161513;text-decoration:none;font-family:Outfit;font-size:18px;transition:.3s ease;margin-top:20px}.about-btn:hover{border-color:#00f}.graduation-progress{text-align:center;width:100%;margin:40px 0;padding:0 20px;gap:var(--title-content-gap)}.graduation-progress h2{font-size:50px;font-weight:600;margin-bottom:60px;margin-top:30px;text-align:center}.progress-bar{width:100%;height:34px;background-color:#eee;border-radius:50px;margin:0 auto;overflow:hidden;border:2px solid #ccc;position:relative}.progress-fill{height:100%;background:linear-gradient(264deg,#00f,#add8e6);transition:width .5s ease;border-radius:50px 0 0 50px;position:relative}.progress-marker{position:absolute;right:0;top:50%;transform:translate(50%,-50%);display:flex;align-items:center;gap:6px;z-index:2;pointer-events:none}.progress-text{font-size:20px;font-weight:700;color:#fff;margin-left:-90px}.progress-cap{font-size:30px;margin-top:3px}.progress-labels{display:flex;justify-content:space-between;width:100%;margin:10px auto 30px;font-size:20px;font-weight:500;color:#fff}.progress-start,.progress-end{font-family:Outfit,sans-serif}.more-about-page{max-width:none;width:100%;padding:0;margin:0}.more-about-page h1{font-size:50px}.more-about-page h2{font-size:20px;margin-top:20px}.more-about-page p{font-size:19px;max-width:80%;margin:0 auto}@media (max-width: 1300px){.about{margin:50px 40px;gap:60px}.about-title h1,.graduation-progress h2{font-size:40px;margin-top:50px;text-align:center;padding-bottom:10px}.about-sections{flex-direction:column;align-items:center;gap:40px}.about-left img{height:auto;max-width:300px;height:350px;width:100%;margin:-80px auto 0}.about-right{align-items:center;text-align:center}.about-para{font-size:14px;line-height:1.6;margin-top:-50px;gap:10px;width:100%}.about-btn{font-size:14px;padding:8px 16px;border-radius:25px}.progress-text{font-size:24px;margin-left:-70px}.progress-cap{font-size:32px}.more-about-page h1{font-size:40px}.more-about-page p{font-size:14px;max-width:100%;padding:0 20px}}@media (max-width: 768px){.about-title h1,.graduation-progress h2{font-size:30px;text-align:center;width:100%}.about-sections{flex-direction:column;align-items:center;gap:30px}.about-left{display:flex;justify-content:center;width:100%}.about-left img{height:auto;max-width:250px;width:100%;margin-top:-80px;margin-bottom:-50px}.about-right{align-items:center;text-align:center;margin-top:10px;max-width:none}.about-para{font-size:14px;line-height:1.6;text-align:center;margin-top:10px;width:100%;max-width:100%;gap:10px}.graduation-progress h2{margin-top:-30px}.about-btn{font-size:12px;padding:6px 14px}.progress-text{font-size:16px;margin-left:-50px}.progress-cap{font-size:20px;margin-left:-3px}.progress-bar{height:24px}.progress-labels{font-size:12px;display:flex;flex-direction:row;justify-content:space-between;width:100%;padding:0 10px;margin:8px auto 20px;color:#fff}}@media (max-width: 500px){.graduation-progress h2{font-size:30px;margin-bottom:5px}.progress-labels{font-size:12px;display:flex;flex-direction:row;justify-content:space-between;width:100%;padding:0 10px;margin:8px auto 20px;color:#fff}.about-title{margin-top:-50px;margin-bottom:-5px}.more-about-page p{padding:0 6px;max-width:100%}}.skill-title{position:relative}.skill-title h1{font-size:50px;font-weight:600;text-align:center}.skill-item{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 30px 50px;color:#fff;font-weight:700;font-size:1.2rem;text-align:center}.skill-icon{height:75px;width:140px;object-fit:contain;margin-bottom:5px}.skill-label{margin:0}@media (max-width: 1024px){.skill-title h1{font-size:60px;padding:0;margin-bottom:-50px}.skill-icon{height:80px;width:140px}}@media (max-width: 768px){.skill-title h1{font-size:45px;margin-bottom:-50px}.skill-icon{height:70px;width:120px}.skill-item{font-size:1rem;margin:0 20px}}@media (max-width: 500px){.skill-title h1{font-size:30px;margin-bottom:-50px;margin-top:-40px}.skill-icon{height:30px;margin-top:10px;width:40px}.skill-item{font-size:.7rem;margin-bottom:12px}}.projects{display:flex;flex-direction:column;align-items:center;justify-content:center}.projects-title{position:relative}.projects-title h1{text-align:center;margin-top:20px}.projects-title img{position:absolute;bottom:0;right:0;z-index:-1}.projects-format{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;overflow:hidden;padding:20px;gap:12px;border-radius:8px;border:2px solid white;transition:.4s;cursor:pointer;height:100%;box-sizing:border-box}.projects-container{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:80px}.projects-container>:last-child{justify-self:center;margin-left:auto;margin-right:auto}.projects-container>:last-child:nth-child(odd){grid-column:1 / span 2;justify-self:center;margin-left:auto;margin-right:auto}.projects-format h3{font-size:20px;font-weight:600}.projects-format h2{font-size:26px;font-weight:800;background:linear-gradient(264deg,#00f,#add8e6);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.projects-format p{color:#d4d4d4;font-size:16px;line-height:26px;max-width:100%;word-wrap:break-word}.projects-readmore{display:flex;gap:20px;align-items:center;margin-top:20px}.project-content{display:flex;flex-direction:column;gap:16px}.toolbox-section{display:flex;flex-direction:column;gap:8px}.toolbox-label{margin:0;padding:0;font-size:16px;color:#d4d4d4}.projects-format ul{padding-left:20px;margin:0;font-size:15px;color:#d4d4d4;list-style-type:disc}.projects-format:hover{border:2px solid blue;transform:scale(1.05);transition:.4s}@media (max-width: 1024px){.projects{align-items:center;gap:70px;margin:20px 70px}.projects-title h1{font-size:60px;padding:0}.projects-title img{width:130px;margin-right:-20px}.projects-container{grid-template-columns:1fr;gap:30px}.projects-format{gap:20px;padding:32px;width:100%;box-sizing:border-box}.projects-format h2{font-size:28px}.projects-format p{font-size:18px;line-height:32px;max-width:300px}.projects-readmore img{width:20px}}@media (max-width: 600px){.projects-title h1{font-size:45px}}@media (max-width: 500px){.projects{margin:20px}.projects-title h1{font-size:30px;margin-bottom:-40px}.projects-container{grid-template-columns:repeat(2,1fr);gap:16px}.projects-format{padding:12px;gap:8px;width:100%;box-sizing:border-box}.projects-format h2{font-size:18px}.projects-format h3{font-size:14px}.projects-format p,.toolbox-label,.projects-format ul{font-size:12px;line-height:1.4}.projects-format ul{padding-left:16px}}.mywork{display:flex;flex-direction:column;align-items:center;justify-content:center}.mywork-title{position:relative}.mywork-title h1{text-align:center}.mywork-title img{position:absolute;bottom:0;right:0;z-index:-1}.mywork-container{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}.mywork-item{position:relative;width:100%;height:200px;overflow:hidden;cursor:pointer;box-sizing:border-box}.mywork-item img{width:100%;height:100%;object-fit:cover;border-radius:12px}.mywork-item:hover{border:4px solid blue;border-radius:12px}.mywork-item:hover .overlay{background-color:#0009;opacity:1}.mywork-item .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0000;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;font-size:12px;font-weight:700}.mywork-showmore{display:flex;gap:15px;border-radius:50px;border:2px solid white;padding:30px 60px;font-size:22px;font-weight:500;margin-bottom:80px;transition:.6s;cursor:pointer}.mywork-showmore:hover{gap:30px;transition:.6s}@media (max-width: 1024px){.mywork{margin:50px 70px;gap:60px}.mywork-title h1{font-size:60px;padding:0}.mywork-container{grid-template-columns:1fr 1fr;gap:30px}.mywork-item{height:240px}.mywork-item img{height:100%}.mywork-showmore{padding:20px 40px;font-size:18px}}@media (max-width: 600px){.mywork-title h1{font-size:45px}.mywork-container{grid-template-columns:1fr}.mywork-item{height:220px}.mywork-showmore{margin:50px auto}}@media (max-width: 500px){.mywork{margin:30px 20px;gap:40px}.mywork-title h1{font-size:30px;margin-bottom:-50px;margin-top:-50px}.mywork-container{grid-template-columns:repeat(2,1fr);gap:16px}.mywork-item{height:140px}.mywork-item img{height:100%;border-radius:12px}.mywork-item .overlay{font-size:10px}.mywork-showmore{padding:14px 28px;font-size:16px;margin:40px auto;gap:10px}}.contact{display:flex;flex-direction:column;align-items:center;justify-content:center}.contact-title{position:relative;margin-top:30px}.contact-error{color:red;font-size:16px;margin:10px 0}.contact-title h1{text-align:center}.contact-title img{position:absolute;bottom:0;right:0;z-index:-1}.contact-detail img{width:20px}.contact-section{display:flex;flex-wrap:wrap;justify-content:center;gap:80px;width:100%;max-width:1200px}.contact-left{display:flex;flex-direction:column;gap:30px}.contact-left h1{font-size:40px;font-weight:700;background:linear-gradient(264deg,#00f,#add8e6);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.contact-left p{max-width:550px;color:#d8d8d8;font-size:16px;line-height:28px}.contact-details{display:flex;flex-direction:column;color:#d8d8d8;font-size:18px;gap:20px}.contact-detail{display:flex;align-items:center;gap:20px}.contact-right{display:flex;flex-direction:column;align-items:start;gap:30px;flex:1;min-width:300px}.contact-right label{color:#d8d8d8;font-size:18px;font-weight:500}.contact-right input{border:none;width:100%;max-width:700px;border-radius:4px;background:#32323c;color:#a0a0a0;font-family:Outfit;box-sizing:border-box;font-size:16px;height:60px;padding-left:16px}.contact-right textarea{width:100%;max-width:700px;border:none;border-radius:4px;background:#32323c;color:#a0a0a0;font-family:Outfit;box-sizing:border-box;font-size:16px;height:60px;padding:20px 20px 20px 16px}.contact-submit{border:none;color:#fff;border-radius:50px;background:linear-gradient(264deg,#00f,#add8e6);margin-bottom:50px;font-family:Outfit;cursor:pointer;transition:.3s;font-size:18px;padding:14px 32px}.contact-submit:hover{transform:scale(1.1);transition:.3s}@media (max-width: 1024px){.contact{margin:50px 70px;gap:60px}.contact-title h1{font-size:60px;padding:0}}@media (max-width: 950px){.contact{gap:50px;margin:50px 70px;align-items:center}.contact-title h1{font-size:60px;padding:0;text-align:center}.contact-title img{width:130px;margin-right:-20px}.contact-section{flex-direction:column;gap:50px}.contact-left h1{font-size:54px}.contact-left p{font-size:18px;line-height:30px}.contact-detail{gap:20px}.contact-detail img{width:25px}.contact-right label{font-size:20px}.contact-right input,.contact-right textarea{width:100%;max-width:100%;font-size:20px}.contact-submit{font-size:20px;padding:15px 40px}}@media (max-width: 600px){.contact-title h1{font-size:36px}.contact-left h1{font-size:40px}.contact-left p{font-size:16px;line-height:28px}.contact-right input{height:60px}.contact-right textarea{padding:20px}.contact-submit{font-size:18px;padding:12px 30px}@media (max-width: 500px){.contact{margin:30px 20px;gap:30px}.contact-title h1{font-size:30px;margin-bottom:10px}.contact-title img{width:80px}.contact-section{gap:30px}.contact-left h1{font-size:25px;margin-bottom:-20px}.contact-left p{font-size:12px;line-height:22px}.contact-details{font-size:12px;gap:10px;margin-top:-10px;margin-bottom:-8px}.contact-detail{gap:10px}.contact-detail img{width:16px}.contact-right{gap:25px}.contact-right label{font-size:12px;margin-bottom:-20px;gap:20px}.contact-right input{margin-bottom:-10px}.contact-right input,.contact-right textarea{font-size:12px;height:35px;padding:10px 12px}.contact-right textarea{height:65px}.contact-submit{font-size:12px;padding:8px 18px;margin-top:-8px}.contact-error{font-size:12px;margin:6px 0}}}.footer{margin:0 170px;display:flex;flex-direction:column;gap:10px;flex-shrink:0}.footer-tetris-credit{font-size:12px;color:#a0a0a0;margin-top:5px}.footer-tetris-credit a{color:#a0a0a0;text-decoration:underline}.footer-email-input{display:flex;gap:30px;padding:20px 80px 20px 30px;border-radius:50px;background:#32323b}.footer-email-input input{outline:none;border:none;background:transparent;color:#a0a0a0;font-family:Outfit;font-size:18px}.footer-subscribe{font-size:20px;padding:22px 50px;border-radius:50px;background:linear-gradient(264deg,#00f,#add8e6);cursor:pointer;transition:.3s}.footer-subscribe:hover{transform:scale(1.1);transition:.3s}.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:18px}.footer-bottom-left img{height:45px;margin-top:-40px}.footer-bottom-center{flex:1;margin-top:-35px;text-align:center;font-size:16px;color:#d4d4d4}.footer-bottom-right{display:flex;gap:10px}.footer-bottom-right img{height:60px;cursor:pointer;transition:transform .3s;padding-bottom:30px}.footer-bottom-right img:hover{transform:scale(1.1)}.footer-email-input:hover{border:2px solid white}@media (max-width:900px){.footer{margin:50px 70px}.footer-top{flex-direction:column;gap:50px}.footer-bottom{display:flex;margin-top:40px;flex-direction:column;align-items:center;gap:20px}.footer-bottom-center{order:2}.footer-bottom-right{order:3}}@media (max-width: 600px){.footer{margin:30px 20px}.footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;margin-top:30px}.footer-bottom-left img{height:30px}.footer-bottom-center{font-size:12px}.footer-bottom-right img{height:35px;padding-bottom:10px}}@media (max-width: 500px){.footer{margin:0 10px}.footer-bottom{justify-content:space-between;align-items:center;gap:10px;margin-top:5px}.footer-bottom-left img{height:30px;margin-top:-30px}.footer-bottom-center{font-size:9px;margin-top:-20px}.footer-bottom-right img{height:35px;margin-top:-5px}.footer-bottom-right{display:flex;gap:4px}.footer-tetris-credit{font-size:7px}}.experiences{display:flex;flex-direction:column;align-items:center}.experiences-title{position:relative;text-align:center}.timeline{position:relative;border-left:4px solid lightblue;display:flex;flex-direction:column;padding-left:30px;gap:30px}.timeline-item{position:relative;display:flex;align-items:flex-start}.timeline-dot{position:absolute;left:-42px;top:20px;width:20px;height:20px;background:linear-gradient(264deg,#00f,#add8e6);border-radius:50%;border:2px solid white;box-shadow:0 0 0 4px #add8e680}.timeline-content{background:#f5f5f5;box-shadow:0 4px 10px #0000001a;transition:transform .3s;position:relative;width:100%;padding:15px 20px;border-radius:14px}.timeline-content:hover{transform:scale(1.05)}.timeline-date{font-size:16px;font-weight:500;color:#555;margin-bottom:8px}.timeline-content h3{font-size:20px;margin:0;color:#2212d3}.timeline-content h4{font-size:16px;margin:5px 0 10px;color:#333}.timeline-content p{font-size:14px;line-height:1.6;color:#444}.timeline-content ul{padding-left:20px;margin:10px 0 0}.timeline-content li{margin-bottom:6px;font-size:15px;line-height:1.4;color:#444}@media (max-width: 1024px){.experiences-title h1{font-size:60px;padding:0}}@media (max-width: 768px){.experiences{margin:50px}.experiences-title h1{font-size:45px}.timeline{padding-left:20px;border-left:3px solid lightblue;gap:30px}.timeline-dot{width:16px;height:16px;left:-33px;top:24px}.timeline-content{padding:15px 20px}.timeline-content h3{font-size:20px}.timeline-content h4{font-size:16px}.timeline-content p{font-size:14px}.timeline-content li{font-size:18px}}@media (max-width: 500px){.experiences{margin:30px 20px;gap:20px}.experiences-title h1{font-size:30px;margin:20px 0}.timeline{padding-left:15px;gap:20px;border-left:2px solid lightblue}.timeline-dot{width:12px;height:12px;left:-23px;top:18px;box-shadow:0 0 0 2px #add8e680}.timeline-content{padding:10px 12px;border-radius:10px}.timeline-date{font-size:12px;margin-bottom:4px}.timeline-content h3{font-size:16px}.timeline-content h4{font-size:14px}.timeline-content p{font-size:12px;line-height:1.4}.timeline-content li{font-size:12px;line-height:1.4;margin-bottom:4px}}.tetris{display:flex;flex-direction:column;align-items:center;overflow-y:hidden}.tetris-title{position:relative}.tetris-title h1{margin-top:20px;margin-bottom:-20px;background:#fff;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center}.tetris-note{font-size:16px;text-align:center;color:gray;font-style:italic}iframe{border:none;border-radius:16px;box-shadow:0 4px 12px #0000004d}@media (max-width: 1024px){.tetris{margin:50px 60px;gap:30px}.tetris-title h1{font-size:60px;padding:0}iframe{width:100%;aspect-ratio:3 / 4}}@media (max-width: 768px){.tetris-title h1{font-size:47px}iframe{width:100%;height:auto;aspect-ratio:3 / 4}}@media (max-width: 500px){.tetris-title h1{font-size:30px}}