html,body,#root{height:100%;margin:0}*{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}.project-detail{padding-top:70px;max-width:900px;margin:0 auto;padding-left:1rem;padding-right:1rem}.project-detail h1{font-size:2.5rem;margin-bottom:20px}.project-tags{margin-bottom:20px}.project-tags span{display:inline-block;background-color:#007bff;color:#fff;padding:5px 12px;border-radius:20px;font-size:.9rem;margin-right:8px;margin-bottom:8px}.project-detail p{line-height:1.6;margin-bottom:20px}.project-detail a{display:inline-block;text-decoration:none;font-weight:500;margin-right:15px;transition:color .2s}.project-detail a{text-decoration:none;font-weight:500}.desc-link{display:flex;gap:1rem;flex-wrap:wrap}.project-detail a.readMore,.project-detail a.demo{display:inline-flex;align-items:center;justify-content:center;padding:.6em 1.5em;border-radius:6px;min-height:40px;margin-bottom:2rem;transition:all .25s ease;cursor:pointer}.project-detail a.readMore{background-color:#0465cd;color:#fff}.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)}.in-progress{display:inline-block;background-color:#f8a025;color:#000;border-radius:5px;font-weight:700;padding:.5em 1em}.status-message{font-size:1em;color:#e7e5e5;margin-top:.3em}.back-btn{display:inline-flex;align-items:center;gap:8px;margin-bottom: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)}video{width:100%;height:auto;border-radius:16px;display:block}.wrapp-video{width:100%;max-width:800px;margin:2rem auto}@media screen and (max-width: 1200px){.project-detail{max-width:1000px}.wrapp-video{max-width:60rem}}: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: 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-item:hover{border-left:2px solid #8ab1ff;border-bottom:2px solid #8ab1ff;box-shadow:0 4px 12px #91858540}.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}.rating-container{width:100%;background-color:#35323e;border-radius:20px}.skill-item p{font-size:1rem;margin-top:.5rem}.ratingSkill{text-align:right;padding-top:5px;padding-bottom:5px;color:#fff;border-radius:20px;background-color:#3e1bbe}.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}.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}}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:3rem}@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)}}