html,body,#root{height:100%;margin:0;scroll-behavior:smooth}*{margin:0;padding:0;box-sizing:border-box}:root{--page-bg: radial-gradient(125% 125% at 50% 10%, #000 50%, #0063ff 100%)}.app-container{min-height:100%;display:flex;flex-direction:column}.section-title{font-size:3rem;font-weight:800;margin-top:4rem;background-color:#fff;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-container{max-width:1200px;margin:0 auto;padding:0 10px;box-sizing:border-box;flex:1;display:flex;flex-direction:column}@media (max-width: 768px){.page-container{flex:1;padding:0 12px;margin:1rem}.section-title{padding-bottom:1rem}}body{font-family:outfit;background:var(--page-bg);background-attachment:fixed;min-height:100vh;width:100%;color:#fff}nav{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-bottom:1px solid rgb(53,51,51);background-color:#000000b0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000}.nav-container{width:100%;display:flex;justify-content:space-between;align-items:center}.logo-link{font-weight:700;display:flex;font-size:1.6rem;text-decoration:none;width:13%;color:#fff;letter-spacing:1px;transition:color .3s ease}.logo-link:hover{color:#04d3ee}.nav-links{display:flex;gap:2rem;list-style:none}.nav-link{position:relative;color:#fff;font-weight:500;cursor:pointer;padding:.5rem 0;transition:all .3s ease}.nav-link:after{content:"";position:absolute;left:0;bottom:-4px;width:0%;height:2px;background-color:#04d3ee;transition:width .3s ease}.nav-link:hover:after{width:100%}.nav-link.active{color:#04d3ee}.menu{display:none;flex-direction:column;justify-content:space-between;width:2.25rem;height:2rem;cursor:pointer}.menu span{display:block;height:.4rem;width:100%;background-color:#fff;border-radius:.2rem;transition:all .3s ease}.logo-navbar{width:3.5rem}@media screen and (max-width: 750px){.logo-navbar{width:4rem}.menu{display:flex;float:right}.nav-links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:center;gap:1.5rem;padding:1rem 0;background-color:#0d1121fc;animation:slideDown .3s ease forwards}.nav-links.open{display:flex}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}}.footer{background:linear-gradient(135deg,#1d1c2a,#1e253a,#181329);text-align:center;display:flex;justify-content:center;padding:2rem;color:#fff;width:100%}.footer p{color:#fff;font-size:1rem}.contact-container{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:1rem}.contacts{margin-top:1rem;position:relative;border:1px solid transparent;border-radius:20px;padding:1rem;display:flex;text-align:center;flex-direction:column}.contactLogo{display:flex;justify-content:center;align-items:center;text-align:center;width:20%;flex-direction:column;cursor:pointer;margin:0 auto;transition:transform 2s}.contactLogo:hover{transform:rotate(180deg)}.targetContact{cursor:pointer}.contactTitle{margin-top:0}.footer-heading{color:#198ffd}.footer-content{color:#fcfeff;text-decoration:none;cursor:pointer}.footer-content:hover{color:#3cb4f0}@media screen and (max-width: 1000px){.contact-container{display:grid;grid-template-columns:repeat(1,1fr)}}:root{--page-padding: 5rem;--gap: 3rem;--text-max-width: 60ch;--secondary-text-color: #09caff;--primary-text-color: white;--background-color: rgb(30, 30, 45);--btn-gradient-primary: linear-gradient(240deg, #00addd -5.09%, #c50ddd 106.2%);--btn-gradient-secondary: linear-gradient(240deg, #3690f7 -5.09%, #0e4dba 106.2%)}.home-container{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:70vh;padding:var(--page-padding) 0;gap:var(--gap)}.main-text{flex:1 1 500px;max-width:var(--text-max-width)}.main-text h1{font-size:2.5rem;font-weight:600}.main-text h2{font-size:4.5rem;font-weight:600;margin-top:1rem}.main-text p{margin:1rem 0;font-size:1.25rem}.words-container{display:flex;align-items:center;overflow:hidden;margin-top:1rem;position:relative}.text{position:relative;color:var(--secondary-text-color);font-size:1.575rem;font-weight:700}.text.first-text{color:var(--primary-text-color)}.text.sec-text{position:relative;padding-left:.3rem}.text.sec-text:before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:var(--page-bg);background-attachment:fixed;z-index:1;border-left:2px solid rgb(24,86,128);animation:animate 4s steps(16) infinite}@keyframes animate{40%,60%{left:100%}to{left:0%}}.profile-container{flex:1 1 400px;display:flex;justify-content:center;align-items:center}.profile-container img{width:100%;padding-top:2rem;max-width:500px;border-radius:50%;object-fit:cover}.btn-action{display:flex;margin-top:2rem;gap:1.5rem;flex-wrap:wrap}.btn-work,.btn-link{display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;padding:1rem 2.5rem;border-radius:50px;position:relative;font-weight:500}.btn-work{background-color:var(--background-color)}.btn-work:after{content:"";position:absolute;height:107%;width:102%;border-radius:50px;background-image:var(--btn-gradient-primary);z-index:-1}.btn-link{background-color:var(--background-color);color:#fff}.btn-link:after{content:"";position:absolute;height:107%;width:102%;border-radius:50px;background-image:var(--btn-gradient-secondary);z-index:-1}.btn-work:hover,.btn-link:hover{z-index:0;box-shadow:30px 0 100px #00addd}.btn-link a{color:#fff;text-decoration:none}@media screen and (max-width: 1200px){.profile-container img{max-width:350px}.btn-action{flex-direction:column;align-items:flex-start}.btn-work,.btn-link{max-width:250px;width:100%}}@media screen and (max-width: 750px){.home-container{flex-direction:column;padding:2rem 1rem;gap:2rem}.main-text h1{font-size:1.5rem}.main-text h2{font-size:2rem}.main-text{order:2;text-align:left;margin:0 auto}.profile-container{order:1;margin-top:2rem}.text{font-size:1rem}.text.sec-text{padding-left:.25rem}}@media screen and (max-width: 650px){.home-container{flex-direction:column;padding:2rem 1rem;gap:2rem}.main-text h1{font-size:1.5rem}.main-text h2{font-size:2rem}.main-text{order:2;text-align:left;margin:0 auto}.profile-container{order:1;margin-top:2rem}.text{font-size:1rem}.text.sec-text{padding-left:.25rem}}.container{max-width:1200px;padding-top:2rem}.para-container{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:1rem}.about-card{margin-top:1rem;background:#ffffff14;padding:2rem;border-radius:20px;box-shadow:0 15px 30px #00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.about-card p{margin-top:1rem;color:#c5d4e3}.about-card:hover{box-shadow:0 25px 50px #0009}.about-description{line-height:1.6;max-width:1000px}.education{margin-top:3rem;position:relative}.education-title{font-size:2.5rem}.education-item{background:#ffffff14;margin-top:1rem;position:relative;margin-bottom:2rem;padding:2rem 2rem 2rem 1.5rem;border-left:2px solid #e5e7eb;border-bottom:2px solid #e5e7eb}.education-header{display:flex;justify-content:space-between;align-items:center;font-size:1.5rem}.education-period{background-color:#e0f7ef;color:#007f5f;font-size:.95rem;border-radius:1rem;padding:.3rem .75rem}.education-location{color:#dbd6d6;font-size:.95rem}.education-description{margin-top:.7rem;color:#d6d5d5;line-height:1.6}.resume-section{background-color:#241f2a;padding:1rem}.cv-download{margin-top:2rem;text-align:center}.resume-title{font-size:3rem;margin-bottom:1rem}.resume-para{font-size:1.2rem}.cv-button{display:inline-block;background-color:#09399b;color:#fff;text-decoration:none;padding:.8rem 2.6rem;border-radius:2rem;font-weight:600;margin-top:1rem;transition:all .3s ease;box-shadow:0 3px 6px #0000001a}.cv-button:hover{background-color:#053d79;transform:translateY(-1px);box-shadow:0 5px 12px #00000026}@media screen and (max-width: 650px){.about{margin-right:2rem}.para-container{display:grid;grid-template-rows:repeat(1,1fr);gap:2rem;margin-top:1rem}}@media screen and (max-width: 1000px){.para-container{display:grid;grid-template-columns:repeat(1,1fr)}}.skill-content{display:grid;grid-template-rows:repeat(3,1fr);gap:2rem;margin-top:1rem}.skill-card{margin-top:1rem;position:relative;background:#ffffff0d;border:1px solid transparent;border-color:#243386;border-radius:20px;padding:1rem;box-shadow:0 15px 30px #0006}.skillicon-container{display:flex;flex-direction:rows;margin-bottom:1rem}.skillicon-container p{margin-left:1rem}.rating{width:50px;height:20px;color:#00f}.skills-container{color:#fff;text-align:center;margin-bottom:2.5rem;display:grid;grid-template-columns:repeat(2,1fr);gap:3rem}.skills-title{font-size:2.5rem;color:#eefbff}.skills-title span{color:#2492ff}.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-bottom:2rem}.skill-item img{max-width:60px}.skill-item p{font-size:1rem;margin-top:.5rem}.css,.html{width:98%}.react{width:76%}.nodeJS,.express,.docker,.javascript{width:56%}.mongoDB{width:66%}.figma,.vsCode,.terminal{width:96%}@media screen and (max-width: 1000px){.skills-section{flex-direction:column;justify-content:center;margin:0 auto;padding-right:2px}.skills-container{grid-template-columns:1fr;width:80%}.skill-title{text-align:center}.skill-card{display:flex;flex-direction:column;width:100%}}@media screen and (max-width: 650px){.skills-grid{display:grid;grid-template-columns:repeat(1,1fr)}}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;align-items:stretch;width:100%}.project-card{display:flex;flex-direction:column;justify-content:space-between;height:100%;margin-top:1rem;border:3px solid transparent;border-radius:20px;padding:1rem;background:linear-gradient(#17233d,#263555) padding-box,linear-gradient(#0d6ea2,#a813a8) border-box;transition:all .3s ease}.column-project p{margin-bottom:1rem;line-height:1.6}.project-content{margin-top:2rem}.project-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 25px 40px #4d479d66;background:linear-gradient(#17233d,#17233d) padding-box,linear-gradient(#14adff,#fb1be1) border-box}.project-img img{position:relative;display:flex;align-items:center;margin:0 auto;justify-content:center;border-radius:20px;width:100%;aspect-ratio:19/9;object-fit:cover;border:1px solid rgb(138,138,138)}.project-section{display:flex;flex-direction:column;padding-top:2rem}.project-container{display:flex;flex-direction:column;flex-grow:1}.project-title{color:#fff;font-size:2rem;padding-bottom:1rem}.role{font-size:1rem;color:#86c4fe}.project-content{display:flex;flex-direction:column;flex-grow:1}.project-content p{color:#fff;line-height:1.6}.project-tags span{display:inline-block;padding:.4rem 1rem;margin:10px 10px 10px 0;background:#384862;color:#fcfeff;border-radius:5px;font-size:.85rem}.desc-link{display:flex;justify-content:space-between;gap:2rem;margin-top:1.5rem}.desc-link a{text-decoration:none;border-radius:20px;padding:.5rem 1.2rem;font-size:15px;display:flex;align-items:center;transition:.3s}.arrow{width:6px;height:6px;border-right:2px solid rgb(255,255,255);border-bottom:2px solid rgb(255,255,255);transform:rotate(-45deg);margin-left:6px;transition:all .3s ease}.desc-link a:hover .arrow{transform:rotate(-45deg) translate(4px,4px)}.category-buttons button{padding:7px 12px;border:none;background:#aedeff;cursor:pointer;border-radius:20px;margin:10px;font-size:16px;font-weight:700}.type-category{background-color:#6181a399;padding:1px 10px;border-radius:5px}.btn-readMore,.category-buttons button.active{background-color:#1689ed;color:#fff}.badge-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.status-badge{display:flex;align-items:center;justify-content:center;padding:4px 12px;color:#fff;background-color:#0009;box-shadow:0 2px 6px #0000004d;font-size:12px;font-weight:500;border-radius:20px}.link-container{text-decoration:none;color:#fff}.status-badge.finished{background-color:#09992a}.status-badge.progress{background-color:#e08609}@media screen and (max-width: 900px){.project-grid{display:flex;justify-content:center;flex-direction:column;margin:0 auto}.desc-link{gap:20px}.project-img img{width:100%;height:100%}}@media screen and (max-width: 650px){.project-grid{display:flex;justify-content:center;flex-direction:column;width:100%;margin:0 auto}.project-img{width:100%;object-fit:cover;height:auto}.project-section{margin-top:2rem}}@media screen and (max-width: 1200px){.project-img img{aspect-ratio:19/10}.project-card{padding:2rem;border-radius:25px}.desc-link{justify-content:center;flex-wrap:wrap}.work-section{align-items:center;text-align:center;display:flex;flex-direction:column}.work-para{padding:20px;width:6%;display:flex;justify-content:center;flex-direction:column;align-items:center}.desc-link .demo,.desc-link .readMore{font-size:14px;padding:8px 16px}}#contact{padding:80px 20px;background:#0f0f0f;color:#fff;margin-bottom:2rem}.container{max-width:1100px;margin:0 auto;text-align:center}.section-title{font-size:2.5rem;margin-bottom:10px;font-weight:700}hr{width:80px;margin:10px auto 40px;border:1px solid #555}.contact-container{display:flex;justify-content:center;gap:60px;flex-wrap:wrap}.contact-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:25px;min-width:200px;background:#1a1a1a;border-radius:16px;transition:transform .3s ease,box-shadow .3s ease}.contact-item:hover{transform:translateY(-6px);box-shadow:0 10px 25px #0006}.contact-icon{width:40px;height:40px;object-fit:contain;transition:transform .3s ease}.contact-item:hover .contact-icon{transform:scale(1.1)}.contact-heading{font-size:1.1rem;font-weight:600;margin:0}.contact-text{color:#bbb;text-decoration:none;font-size:.95rem;transition:color .3s ease}.contact-text:hover{color:#fff}.footer-copy{margin-top:60px;font-size:.9rem;color:#777}.project-detail a.readMore{background-color:#0465cd;color:#fff}.project-container-wrap{display:flex;flex-direction:column}.project-detail a.demo{background:transparent;border:2px solid #205fe7;color:#fff}.project-detail a.readMore:hover{transform:translateY(-2px);background:#007bff;box-shadow:0 8px 20px #2563ea66}.project-detail a.demo:hover{background:#205fe7;color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #2563ea66}.arrow{width:6px;height:6px;transform:rotate(-45deg);margin-left:8px;transform:transform .2s ease}.project-detail a:hover .arrow{transform:rotate(-45deg) translate(3px,3px)}.back-btn{display:inline-flex;align-items:center;gap:7px;line-height:1.5rem;margin-top:2rem;text-decoration:none;color:#48c4ed;font-weight:500;transition:translateX(-3px) ease}.back-btn:before{content:"←";font-weight:700;font-size:1.5em}.back-btn:hover{color:#3d97ec;transform:translate(-4px)}.wrapp-video{width:100%;max-width:800px;margin:2rem auto}.project-detail{padding-top:80px;margin:0 auto;max-width:1100px;padding-left:1rem;padding-right:1rem;color:#f5f5f5}.project-detail h1{font-size:3rem;margin-bottom:1rem;letter-spacing:-.02em}.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.5rem}.project-tags span{background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:#fff;padding:6px 12px;border-radius:999px;font-size:.85rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.desc-link{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:2rem}.project-detail a.readMore,.project-detail a.demo{padding:.7rem 1.2rem;border-radius:10px;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:all .25s ease}.project-detail a.readMore{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff}.project-detail a.demo{border:1px solid rgba(255,255,255,.2);color:#fff;background:#ffffff0d}.project-detail a:hover{transform:translateY(-3px)}.project-description{font-size:1.1rem;line-height:1.8;opacity:.9;margin-bottom:2rem}.wrapp-video{margin:2rem 0}video{width:100%;border-radius:16px;box-shadow:0 20px 40px #0006}.project-section{margin-top:2.5rem}.project-section h2{font-size:1.5rem;margin-bottom:1rem}.process-title{padding-bottom:2rem}.role-container{background:#ffffff0f;border:1px solid rgba(255,255,255,.08);padding:2rem;border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.process-container{margin-top:3rem}.process-step{display:grid;grid-template-columns:50px 1fr;gap:1rem;margin-bottom:2.5rem}.step-number{font-size:1.9rem;opacity:1.6;color:#006eff}.step-content h3{margin-bottom:.5rem}.process-image-group{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:1rem}.process-image-group img{width:100%;border-radius:12px;transition:transform .2s ease;max-width:1100px}.process-image-group img:hover{transform:scale(1.02)}.process-image-item{display:flex;flex-direction:column;margin-bottom:2rem;background-color:#122236;border-radius:10px;padding:5px;margin-top:2rem;justify-content:center}.image-caption{font-size:14px;color:#d6d4d4;line-height:1.4;padding-left:2rem}.new-version-image img{display:flex;flex-direction:column;max-width:900px;justify-content:center}.back-btn{display:inline-flex;margin-bottom:2rem;color:#60a5fa;text-decoration:none}.back-btn:hover{transform:translate(-4px)}.project-cover-image{width:100%}.project-cover-image img{width:100%;border-radius:20px;object-fit:cover;display:block}.key-insight-list{margin-top:1rem;padding:1.2rem 1.5rem;background:#1d1d1d;border-radius:12px;list-style:none;display:flex;flex-direction:column;gap:10px}.key-insight-list li{position:relative;padding-left:1rem;line-height:1.6;opacity:.95}.key-insight-list li:before{content:"•";color:#60a5fa;position:absolute;left:0}.step-highlights{display:flex;flex-wrap:wrap;gap:10px;margin-top:1rem}.step-highlights span{padding:6px 12px;border-radius:999px;background:#ffffff14;border:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#dbeafe}@media screen and (max-width: 1200px){.project-detail{max-width:1000px}.wrapp-video{max-width:60rem}}