*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}html,body{margin:0;padding:0}body{background-color:azure;color:#add8e6;text-align:center;padding-top:0vh}.topbar{display:flex;align-items:center;justify-content:space-between;background-color:#333333e6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;padding:1vh 2vw;position:sticky;top:0;width:100%;z-index:1000;transition:background .3s}.topbar .logo a{font-size:3vw;font-weight:700;color:#fff;text-decoration:none}.topbar .nav-links{list-style:none;display:flex;gap:2vw}.topbar .nav-links li a{color:#fff;text-decoration:none;padding:.3vh 1vw;transition:color .3s ease,background-color .3s ease}.topbar .nav-links li a:hover{background-color:#555;border-radius:.5vw}.parallax{background-image:url(/assets/_X100068-9ZZL12V9.webp);height:55vh;background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover}.container{background-color:#000000d9;padding:3vw;border-radius:1vw;box-shadow:0 0 2vw #000000a6;max-width:60vw;width:fit-content;margin:auto;display:flex;flex-direction:column;align-items:center}.container h1{font-size:5vw;margin-bottom:.5vh;text-align:center;color:#fcdc4f}.container .description{margin-top:0vh;font-size:2vw;text-align:center;max-width:60vw}button{padding:1vh 2vw;font-size:1.5vw;background-color:#ff5722;color:#fff;border:none;border-radius:.5vw;cursor:pointer;transition:background-color .3s}button:hover{background-color:#e64a19}.footer{background-color:#333;color:#fff;padding:2vh 0;text-align:center;width:100%;position:relative}.footer-container{display:flex;justify-content:space-around;flex-wrap:wrap;max-width:1000px;margin:0 auto}.footer-section{margin:10px;text-align:left}.footer-section h3{color:#fff}.footer-section ul{list-style:none;padding:0}.footer-section ul li{margin:5px 0}.footer-section a{color:#a8d7fd;text-decoration:none}.footer-section a:hover{text-decoration:underline}.background-animation{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:-1;pointer-events:none}@keyframes pulse{0%,to{transform:scale(.5);opacity:.3}50%{transform:scale(1.5);opacity:.7}}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(3vw,-3vh)}}@keyframes colorChange{0%,to{background-color:#ff63474d}25%{background-color:#87cefa4d}50%{background-color:#90ee904d}75%{background-color:#ee82ee4d}}.background-animation .circle{position:absolute;border-radius:50%;animation:pulse 3s infinite ease-in-out,float 8s infinite alternate ease-in-out,colorChange 6s infinite ease-in-out}.background-animation .circle:nth-child(1){width:10vw;height:10vw;top:10%;left:20%}.background-animation .circle:nth-child(2){width:12vw;height:12vw;top:40%;left:70%}.background-animation .circle:nth-child(3){width:8vw;height:8vw;top:60%;left:30%}.background-animation .circle:nth-child(4){width:14vw;height:14vw;top:20%;left:80%}.background-animation .circle:nth-child(5){width:6vw;height:6vw;top:75%;left:50%}.background-animation .circle:nth-child(6){width:11vw;height:11vw;top:30%;left:40%}.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:1vw;padding:1vw;margin-top:2vh}.carousel a{text-decoration:none;color:#789}.carousel img{scroll-snap-align:start;border-radius:1vw;width:33vw;height:15vw;object-fit:cover}.carousel-controls{display:flex;justify-content:space-between;margin-top:1vh;background-color:#00000080;padding:1vh 2vw;border-radius:.5vw;color:#fff;font-size:1.5vw}.carousel-controls button{background-color:#ff5722;color:#fff;border:none;padding:1vh 2vw;border-radius:.5vw;cursor:pointer;transition:background-color .3s}.carousel-controls button:hover{background-color:#e64a19}.carousel-item{transition:transform .3s ease-in-out}.carousel-item:hover{transform:scale(1.05)}@media (max-width: 768px){.topbar{flex-direction:column;align-items:center}}.sub-description{font-size:1.5vw;color:#add8e6;text-align:center;max-width:60vw;margin-top:.5vh}.footer-copyright{margin-top:1vh;padding:1vh 0 0;color:#aaa;font-size:.9rem}.section-heading{color:#fcdc4f;font-size:clamp(1.4rem,2.5vw,2.2rem);margin:2vh 0 1vh;text-align:center}.projects-section{padding:2vh 2vw 4vh;max-width:1200px;margin:0 auto}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.8rem;padding:1vh 0}.project-card{background-color:#000c;border-radius:.8rem;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column}.project-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #fcdc4f33}.card-img{width:100%;height:180px;object-fit:cover;display:block}.project-card-content{padding:1.2rem;flex:1;display:flex;flex-direction:column;text-align:left}.project-card-content h3{color:#fcdc4f;margin:.5rem 0;font-size:1.1rem}.card-desc{color:#add8e6;font-size:.9rem;margin-bottom:1rem;flex:1;line-height:1.5}.card-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}.btn-view{display:inline-block;background-color:#ff5722;color:#fff;padding:.5rem 1.2rem;border-radius:.5rem;text-decoration:none;font-size:.9rem;font-weight:700;transition:background-color .3s;align-self:flex-start}.btn-view:hover{background-color:#e64a19}.status-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.78rem;font-weight:700}.status-badge.active{background-color:#4caf50;color:#fff}.status-badge.in-progress{background-color:#ff9800;color:#111}.status-badge.complete{background-color:#2196f3;color:#fff}.category-tag{display:inline-block;background-color:#ffffff1f;color:#add8e6;padding:2px 10px;border-radius:20px;font-size:.78rem;border:1px solid rgba(255,255,255,.25)}.tech-tag{display:inline-block;background-color:#6200ea;color:#fff;padding:2px 10px;border-radius:20px;font-size:.8rem}.filter-bar{display:flex;justify-content:center;gap:.8rem;padding:1.5vh 1rem;flex-wrap:wrap}.filter-btn{padding:.45rem 1.4rem;background-color:#0009;color:#add8e6;border:1px solid rgba(255,255,255,.25);border-radius:20px;cursor:pointer;font-size:.9rem;transition:all .3s ease}.filter-btn:hover,.filter-btn.active{background-color:#ff5722;color:#fff;border-color:#ff5722}.featured-project{display:flex;background-color:#000000d9;border-radius:1rem;overflow:hidden;border:2px solid #fcdc4f;margin:1vh auto 2vh;max-width:900px}.featured-project img{width:40%;object-fit:cover;min-height:220px;display:block}.featured-project-content{padding:2rem;flex:1;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:.7rem}.featured-project-content h2{color:#fcdc4f;font-size:clamp(1.1rem,2.2vw,1.8rem);margin:0}.featured-project-content p{color:#add8e6;line-height:1.6;font-size:.95rem;margin:0}.featured-label{display:inline-block;background-color:#fcdc4f;color:#222;font-weight:700;padding:3px 14px;border-radius:20px;font-size:.82rem;align-self:flex-start}.main-content{max-width:900px;margin:3vh auto;padding:0 2vw 4vh}.back-link{display:inline-block;color:#add8e6;text-decoration:none;padding:.45rem 1.1rem;margin:.8rem 0 1.2rem;border:1px solid rgba(255,255,255,.3);border-radius:.5rem;font-size:.9rem;transition:all .3s ease}.back-link:hover{background-color:#ffffff1a;color:#fff}.project-hero-container{position:relative;width:100%;border-radius:1rem;overflow:hidden;margin-bottom:1.5vh}.project-hero{width:100%;max-height:45vh;object-fit:cover;display:block}.project-hero-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000000e0);padding:2rem;text-align:left}.project-hero-overlay h1{color:#fcdc4f;font-size:clamp(1.3rem,3vw,2.4rem);margin-bottom:.5rem}.project-details{background-color:#000c;border-radius:1rem;overflow:hidden}.project-description{padding:2rem 2.5rem;color:#add8e6;text-align:left}.project-section{margin:2rem 0}.project-section:first-child{margin-top:0}.project-section h2{color:#fcdc4f;font-size:clamp(1rem,1.8vw,1.5rem);margin-bottom:.8rem;padding-bottom:.4rem;border-bottom:1px solid rgba(255,255,255,.15)}.project-section p,.project-section li{line-height:1.7;color:#add8e6}.project-section ul{list-style:disc;padding-left:1.5rem}.tags-row{display:flex;flex-wrap:wrap;gap:.5rem}.project-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}.gallery-item{cursor:pointer;border-radius:.5rem;overflow:hidden;background-color:#0006;transition:transform .25s ease,box-shadow .25s ease}.gallery-item:hover{transform:scale(1.03);box-shadow:0 4px 15px #0009}.gallery-item img{width:100%;aspect-ratio:16 / 9;object-fit:cover;display:block}.gallery-item .caption{font-size:.78rem;color:#aaa;padding:.35rem .6rem;text-align:center}.lightbox{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000000ed;z-index:9999;justify-content:center;align-items:center;flex-direction:column}.lightbox.open{display:flex}.lightbox-img{max-width:88vw;max-height:78vh;object-fit:contain;border-radius:.5rem;box-shadow:0 0 40px #000c}.lightbox-caption{color:#ccc;margin-top:.8rem;font-size:.9rem;max-width:60vw;text-align:center}.lightbox-close{position:absolute;top:1.2rem;right:1.8rem;color:#fff;font-size:2rem;cursor:pointer;background:none;border:none;padding:.2rem .5rem;line-height:1;transition:color .2s}.lightbox-close:hover{color:#fcdc4f}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background-color:#ffffff26;color:#fff;border:none;padding:.9rem 1rem;font-size:1.4rem;cursor:pointer;border-radius:.5rem;transition:background-color .2s;line-height:1}.lightbox-nav:hover{background-color:#ffffff4d}.lightbox-prev{left:1.2rem}.lightbox-next{right:1.2rem}.project-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.5rem}.btn-github{display:inline-flex;align-items:center;gap:.5rem;background-color:#24292e;color:#fff;padding:.6rem 1.4rem;border-radius:.5rem;text-decoration:none;font-weight:700;font-size:.9rem;transition:background-color .3s;border:2px solid #555}.btn-github:hover{background-color:#444;border-color:#888}.btn-demo{display:inline-flex;align-items:center;gap:.5rem;background-color:#ff5722;color:#fff;padding:.6rem 1.4rem;border-radius:.5rem;text-decoration:none;font-weight:700;font-size:.9rem;transition:background-color .3s}.btn-demo:hover{background-color:#e64a19}.mermaid-container{background-color:#ffffff0a;border-radius:.5rem;padding:1rem;overflow-x:auto}@media (max-width: 768px){.projects-grid{grid-template-columns:1fr;gap:1.2rem}.featured-project{flex-direction:column}.featured-project img{width:100%;min-height:160px}.project-gallery{grid-template-columns:1fr 1fr}.lightbox-nav{padding:.6rem .8rem;font-size:1.1rem}.main-content{padding:0 1rem 3vh}.project-description{padding:1.2rem 1.5rem}.sub-description{font-size:3.5vw}}