:root{--background-color:#000;--text-color:#888}*{box-sizing:border-box;margin:0;padding:0}body{font-family:sans-serif}.navbar{background-color:var(--background-color);justify-content:space-between;align-items:center;width:100%;max-width:600px;height:60px;max-height:350px;padding-right:10px;display:flex}.logo h3{color:#4a4ae4;margin-left:25px}.nav-right-section{justify-content:center;align-items:center;gap:15px;display:flex}.nav-list ul{color:var(--text-color);justify-content:center;align-items:center;gap:8px;font-size:smaller;list-style:none;display:flex}.button{color:#00f;border-color:#00f;border-radius:6px;width:70px;height:26px;margin-right:15px}@media (width>=601px) and (width<=1024px){.navbar{max-width:100%;height:65px;padding-right:20px}.logo h3{margin-left:35px;font-size:1.8rem}.nav-right-section{gap:20px}.nav-list ul{gap:14px;font-size:.9rem}.nav-list ul li{cursor:pointer;font-size:1.7rem;transition:color .2s}.nav-list ul li:hover{color:#4a4ae4}.button{cursor:pointer;width:140px;height:45px;margin-right:20px;font-size:1.3rem;transition:background .3s,color .3s}.button:hover{color:#fff;background-color:#00f}}@media (width>=1025px){.navbar{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-width:100%;height:70px;padding-left:10px;padding-right:30px;position:sticky;top:0;box-shadow:0 1px 10px #0006}.logo h3{cursor:pointer;margin-left:50px;font-size:1.5rem;transition:color .2s}.logo h3:hover{color:#4f52d9}.nav-right-section{gap:30px;margin-right:20px}.nav-list ul{gap:28px;font-size:.95rem}.nav-list ul li{cursor:pointer;transition:color .2s;position:relative}.nav-list ul li:after{content:"";background-color:#4a4ae4;width:0%;height:2px;transition:width .3s;position:absolute;bottom:-4px;left:0}.nav-list ul li:hover{color:#4a4ae4}.nav-list ul li:hover:after{width:100%}.button{cursor:pointer;border-radius:8px;width:90px;height:35px;margin-right:0;font-size:.9rem;transition:background .3s,color .3s,transform .2s}.button:hover{color:#fff;background-color:#00f;transform:translateY(-2px)}}.hero-section{background-color:#000000dc;justify-content:space-around;align-items:center;gap:5px;width:100%;max-width:600px;height:45vh;max-height:fit-content;padding-left:25px;padding-right:15px;display:flex}.left-available-btn button{color:#00f;background-color:var(--text-color);border:1px solid #00f;border-radius:24px;width:140px;height:30px}.left-name p{color:#fff;margin-top:15px;font-size:x-large;font-weight:bolder}.left-skill p{color:var(--text-color);margin-top:15px;margin-bottom:10px;font-size:13px}.left-skill-div{color:var(--text-color);opacity:.7;margin-top:10px;font-size:12px}.spann{color:#3636d1}.left-btn{margin-top:10px;display:flex}.view-btn{color:#fff;background-color:#6366f1;border:1px solid #00f;border-radius:8px;width:100px;height:40px}.download-btn{width:100px;height:40px;color:var(--text-color);background-color:#000000dc;border:1px solid #000;border-radius:8px;margin-left:10px}.avatar-circle{background-color:var(--background-color);color:#6366f1;border:4px solid #6366f1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:120px;height:120px;font-family:sans-serif;font-size:2.5rem;font-weight:700;display:flex}.hero-right h1{color:#00f}@media (width>=601px) and (width<=1024px){.hero-section{justify-content:space-between;gap:30px;max-width:100%;height:55vh;padding-left:50px;padding-right:50px}.left-available-btn button{cursor:pointer;width:300px;height:84px;font-size:1.7rem;transition:background .2s,color .2s}.left-available-btn button:hover{color:#fff;background-color:#00f}.left-name p{font-size:2.8myrem;margin-top:16px;line-height:1.3}.left-skill p{margin-top:14px;font-size:1.6rem}.left-skill-div{font-size:1.5rem}.left-btn{gap:50px;margin-top:40px}.view-btn,.download-btn{cursor:pointer;width:230px;height:82px;margin-left:0;font-size:1.5rem;transition:opacity .2s,transform .2s}.view-btn:hover{background-color:#4f52d9;transform:translateY(-2px)}.download-btn:hover{background-color:#1a1a1a;transform:translateY(-2px)}.avatar-circle{width:150px;height:150px;font-size:3.2rem}}@media (width>=1025px){.hero-section{justify-content:space-between;gap:60px;max-width:100%;height:65vh;padding-left:100px;padding-right:100px}.left-available-btn button{cursor:pointer;width:175px;height:38px;font-size:.95rem;transition:background .3s,color .3s}.left-available-btn button:hover{color:#fff;background-color:#00f}.left-name p{margin-top:22px;font-size:3.2rem;line-height:1.15}.left-skill p{margin-top:18px;font-size:1.05rem;line-height:1.6}.left-skill-div{font-size:.95rem;line-height:1.6}.left-btn{gap:14px;margin-top:28px}.view-btn{cursor:pointer;width:145px;height:48px;margin-left:0;font-size:1rem;transition:background .3s,transform .2s}.view-btn:hover{background-color:#4f52d9;transform:translateY(-3px)}.download-btn{cursor:pointer;width:145px;height:48px;margin-left:0;font-size:1rem;transition:background .3s,transform .2s}.download-btn:hover{background-color:#1a1a1a;transform:translateY(-3px)}.avatar-circle{flex-shrink:0;width:200px;height:200px;font-size:4rem;transition:box-shadow .3s,transform .3s}.avatar-circle:hover{transform:scale(1.05);box-shadow:0 0 40px #6366f180}}.about-section{background-color:#000000dc;width:100%;max-width:600px;height:auto;max-height:fit-content;margin-top:1px;padding-top:20px;padding-bottom:20px}.about-title h2{color:#fff;margin-left:25px;font-size:large}.about-title span{color:#3636d1}.about-detail{color:#aaa;margin:15px 65px 15px 25px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.about-btn{flex-wrap:wrap;gap:15px;margin-top:25px;margin-left:25px;display:flex}.about-btn button{background-color:#1a1a1a;border:none;border-radius:15px;width:160px;height:60px}.last-btn{margin:10px 75px}.blue{color:#3636d1;font-size:large;font-weight:700}.about-btn p{color:var(--text-color);font-size:medium}@media (width>=601px) and (width<=1024px){.about-section{max-width:100%;padding-top:30px;padding-bottom:30px}.about-title h2{margin-left:35px;font-size:xx-large}.about-detail{margin:20px 80px 20px 35px;font-size:1.5rem;line-height:1.7}.about-btn{gap:18px;margin-top:30px;margin-left:35px}.about-btn button{cursor:pointer;border-radius:15px;width:170px;height:65px;transition:background .3s,transform .2s}.about-btn button:hover{background-color:#2a2a2a;transform:translateY(-2px)}.last-btn{margin:15px 80px}.blue{font-size:x-large}.about-btn p{font-size:.95rem}}@media (width>=1025px){.about-section{max-width:100%;padding:50px 60px}.about-title h2{margin-bottom:10px;margin-left:0;font-size:2rem}.about-detail{max-width:720px;margin:20px 0;font-size:1rem;line-height:1.8}.about-btn{flex-wrap:nowrap;gap:20px;margin-top:35px;margin-left:0}.about-btn button{cursor:pointer;border-radius:16px;width:180px;height:70px;transition:background .3s,transform .2s,box-shadow .3s}.about-btn button:hover{background-color:#2a2a2a;transform:translateY(-4px);box-shadow:0 8px 20px #3636d133}.last-btn{margin:15px 0}.blue{font-size:1.6rem}.about-btn p{font-size:1rem}}.skill-section{background-color:#000000dc;width:100%;max-width:600px;height:auto;max-height:fit-content;margin-top:1px;padding:20px}.skill-section h2{color:#f0f0f0;margin-bottom:32px;font-size:22px;font-weight:600}.skill-section span{color:#3636d1}.skill-section h4{color:#6c63ff;text-transform:uppercase;letter-spacing:.08em;margin-top:20px;margin-bottom:10px;font-size:11px}.frontend-btn,.backend-btn,.tools-btn{flex-wrap:wrap;gap:10px;display:flex}.frontend-btn button{color:#9d96f5;background:#1a1830;border:1px solid #3c3480;border-radius:99px;padding:5px 14px;font-size:12px}.backend-btn button{color:#5dcaa5;background:#0d2018;border:1px solid #0f4030;border-radius:99px;padding:5px 14px;font-size:12px}.tools-btn button{color:#ef9f27;background:#1e1500;border:1px solid #3a2800;border-radius:99px;padding:5px 14px;font-size:12px}@media (width>=601px) and (width<=1024px){.skill-section{max-width:100%;padding:30px 35px}.skill-section h2{margin-bottom:36px;font-size:26px}.skill-section h4{margin-top:24px;margin-bottom:12px;font-size:12px}.frontend-btn,.backend-btn,.tools-btn{gap:12px}.frontend-btn button,.backend-btn button,.tools-btn button{cursor:pointer;padding:6px 18px;font-size:13px;transition:transform .2s,opacity .2s}.frontend-btn button:hover{background:#2a2650;transform:translateY(-2px)}.backend-btn button:hover{background:#163328;transform:translateY(-2px)}.tools-btn button:hover{background:#2e2000;transform:translateY(-2px)}}@media (width>=1025px){.skill-section{max-width:100%;padding:50px 60px}.skill-section h2{margin-bottom:40px;font-size:32px;font-weight:700}.skill-section h4{letter-spacing:.1em;margin-top:30px;margin-bottom:14px;font-size:13px}.skills-wrapper{grid-template-columns:repeat(3,1fr);align-items:start;gap:40px;display:grid}.frontend-btn,.backend-btn,.tools-btn{gap:12px}.frontend-btn button,.backend-btn button,.tools-btn button{cursor:pointer;padding:7px 20px;font-size:13px;transition:transform .2s,background .2s,box-shadow .2s}.frontend-btn button:hover{background:#2a2650;transform:translateY(-3px);box-shadow:0 4px 12px #6c63ff40}.backend-btn button:hover{background:#163328;transform:translateY(-3px);box-shadow:0 4px 12px #5dcaa533}.tools-btn button:hover{background:#2e2000;transform:translateY(-3px);box-shadow:0 4px 12px #ef9f2733}}.project-section{box-sizing:border-box;background-color:#0a0a0a;width:100%;margin-top:1px;padding:60px 20px 80px}.project-section h2{color:#fff;letter-spacing:-.02em;margin:0 0 36px;font-size:1.6rem;font-weight:700}.project-section h2 span{color:#5b5ef4}.project-container{grid-template-columns:1fr;gap:20px;display:grid}.project-card{background-color:#111;border:1px solid #1e1e1e;border-radius:16px;transition:transform .25s,border-color .25s,box-shadow .25s;overflow:hidden}.project-card:hover{border-color:#2a2a3e;transform:translateY(-4px);box-shadow:0 12px 40px #5b5ef41f}.card-image{aspect-ratio:16/9;background-color:#1a1a2e;width:100%;overflow:hidden}.card-image img{object-fit:cover;width:100%;height:100%;transition:transform .4s;display:block}.project-card:hover .card-image img{transform:scale(1.04)}.card-info{flex-direction:column;gap:10px;padding:20px 22px 22px;display:flex}.project-card h3{color:#fff;letter-spacing:-.01em;margin:0;font-size:1.1rem;font-weight:700}.project-card p{color:#888;margin:0;font-size:.85rem;line-height:1.65}.tech-tags{flex-wrap:wrap;gap:6px;display:flex}.tag{color:#8a8af8;background-color:#1a1a2e;border:1px solid #2a2a4a;border-radius:20px;padding:3px 10px;font-size:.72rem;font-weight:500}.card-buttons{border-top:1px solid #1a1a1a;gap:8px;margin-top:4px;padding-top:10px;display:flex}.btn{color:#aaa;background-color:#0000;border:1px solid #2a2a2a;border-radius:8px;padding:6px 14px;font-size:.78rem;font-weight:500;text-decoration:none;transition:background .2s,color .2s,border-color .2s}.btn:hover{color:#fff;background-color:#1a1a1a;border-color:#3a3a3a}.btn-primary{color:#fff;background-color:#5b5ef4;border-color:#5b5ef4}.btn-primary:hover{background-color:#4a4de0;border-color:#4a4de0}@media (width>=601px){.project-section{padding:70px 36px 90px}.project-section h2{font-size:1.9rem}.project-container{grid-template-columns:repeat(2,1fr);gap:20px}}@media (width>=1025px){.project-section{padding:90px 60px 110px}.project-section h2{margin-bottom:48px;font-size:2.2rem}.project-container{grid-template-columns:repeat(3,1fr);gap:24px}.project-card h3{font-size:1.15rem}}.contact-sec{background-color:#000000dc;width:100%;max-width:600px;height:auto;max-height:fit-content;margin-top:1px;padding:20px 0 20px 25px}.contact-sec h2{color:#fff;font-size:large}.contact-sec span{color:#3636d1}.contact-left{color:var(--text-color);margin-top:20px}.contact-left h6{color:#a540a5;margin-bottom:15px}.a-link{margin-bottom:15px}.a-link a{color:#a540a5}@media (width>=601px) and (width<=1024px){.contact-sec{max-width:100%;padding:30px 0 30px 40px}.contact-sec h2{font-size:x-large}.content-left{flex-direction:column;gap:10px;margin-top:25px;display:flex}.contact-left h6{margin-bottom:18px;font-size:1rem}.a-link{margin-bottom:18px}}@media (width>=1025px){.contact-sec{flex-direction:column;max-width:100%;margin-top:1px;padding:50px 60px;display:flex}.contact-sec h2{margin-bottom:10px;font-size:2rem}.contact-left{grid-template-columns:1fr 1fr 1fr;align-items:start;gap:20px;margin-top:30px;display:grid}.contact-left h6{grid-column:1/-1;margin-bottom:20px;font-size:1.1rem}.a-link{margin-bottom:20px}.a-link a{font-size:1rem;text-decoration:none;transition:color .2s}.a-link a:hover{color:#6c63ff}input{width:300px;height:40px;margin-bottom:10px;margin-right:15px;padding:0 12px;font-size:.95rem}.send-btn{cursor:pointer;width:150px;height:45px;margin:15px 0;font-size:1rem}}