.project-hero{background-color:var(--dark-bg);color:var(--bg-color);padding:120px 0 60px;position:relative;overflow:hidden;z-index:1}.project-hero::after,.project-hero::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0}.project-hero::before{background:linear-gradient(45deg,rgba(0,143,17,.3),rgba(0,255,65,.1));z-index:-1}.project-hero::after{background-image:url(../img/code-pattern.png);opacity:.1;z-index:-2}.project-hero .container{position:relative;z-index:2}.project-title{text-align:center}.project-title h1{font-size:3.5rem;margin-bottom:20px;background:linear-gradient(to right,#fff,var(--primary-color));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 15px rgba(0,255,65,.3)}.project-meta{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}.project-meta span{display:flex;align-items:center;gap:8px}.project-info li::before,.project-meta a,.project-meta i{color:var(--primary-color)}.project-meta a{text-decoration:underline}.project-details{padding:80px 0;background-color:var(--bg-color);position:relative;z-index:1}.project-content{display:grid;grid-template-columns:1fr 1fr;gap:50px}.project-gallery,.project-info h2,.project-info li{position:relative}.main-image,.project-video video{border:1px solid rgba(0,255,65,.3)}.main-image{width:100%;height:auto;border-radius:8px;box-shadow:0 5px 20px rgba(0,0,0,.2);transition:all .3s ease;display:block}.gallery-thumbnails{display:flex;gap:15px;margin-top:20px;justify-content:center;flex-wrap:wrap}.thumbnail{width:80px;height:60px;object-fit:cover;border-radius:4px;cursor:pointer;opacity:.7;transition:all .3s ease;border:1px solid transparent}.thumbnail:hover{opacity:1;border-color:var(--primary-color);transform:translateY(-3px)}.project-video{margin-top:40px;padding:25px;background-color:var(--light-bg);border-radius:8px;border:1px solid rgba(0,255,65,.2)}.project-info h3,.project-video h3{font-size:1.4rem;font-family:var(--code-font)}.project-video h3{margin-bottom:10px;color:var(--primary-dark)}.project-video p{color:var(--text-color-secondary);margin-bottom:15px;line-height:1.6}.project-video video{box-shadow:0 5px 15px rgba(0,0,0,.15)}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:20px}.video-grid video{width:100%;border-radius:8px;background-color:#000}.project-info h2{font-size:2rem;margin-bottom:25px;color:var(--text-color)}.project-info h2::after{content:"";position:absolute;bottom:-10px;left:0;width:50px;height:3px;background-color:var(--primary-color)}.project-info h3{margin:30px 0 15px;color:var(--secondary-color)}.project-info h4{font-size:1.2rem;margin:20px 0 10px;color:var(--text-color);font-weight:600}.project-info p{margin-bottom:15px;line-height:1.7}.project-info ul{list-style:none;padding-left:0;margin-bottom:15px}.project-info li{margin-bottom:10px;line-height:1.5;padding-left:25px}.project-info li::before{content:">";position:absolute;left:0;top:0;font-family:var(--code-font);font-weight:700}.tech-stack{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.tech-stack span{display:inline-block;padding:6px 12px;background-color:var(--light-bg);color:var(--secondary-color);border-radius:30px;font-size:.9rem;transition:all .3s ease;border:1px solid rgba(0,143,17,.2);font-family:"Fira Code",monospace}.tech-stack span:hover{background-color:rgba(0,255,65,.1);transform:translateY(-3px);box-shadow:0 3px 10px rgba(0,255,65,.15)}.project-navigation{background-color:var(--light-bg);padding:30px 0;border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05)}.project-navigation .container{display:flex;justify-content:space-between}.nav-project{display:flex;align-items:center;gap:15px;padding:15px;border-radius:8px;transition:all .3s ease;background-color:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.05)}.nav-project:hover{background-color:var(--bg-color);transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,.05)}.code-snippet::before,.nav-content span{display:block;color:var(--text-color);opacity:.7}.nav-content span{font-size:.9rem;margin-bottom:5px}.nav-content h4,.nav-project i{font-size:1.1rem;color:var(--secondary-color)}.nav-project i{font-size:1.5rem}.code-snippet{background-color:var(--dark-bg);font-family:"Fira Code",monospace;padding:20px;border-radius:8px;margin:30px 0;overflow:auto;position:relative}.code-snippet::before{content:"$ ./project_info.sh";margin-bottom:15px}.code-snippet code{line-height:1.6}.code-snippet .highlight{color:#ff5f56}.code-snippet .variable{color:#5af78e}.code-snippet .keyword{color:#57c7ff}.project-info .code-example{margin:25px 0;position:relative;border-radius:8px;overflow:hidden}.project-info .code-header{background-color:#2a2a2a;color:#ddd;padding:8px 15px;font-size:.9rem;font-family:var(--code-font);display:flex;justify-content:space-between}.project-info .code-header .dots{display:flex;gap:5px}.project-info .code-header .dot{width:12px;height:12px;border-radius:50%}.project-info .code-header .dot-red{background-color:#ff5f56}.project-info .code-header .dot-yellow{background-color:#ffbd2e}.project-info .code-header .dot-green{background-color:#27c93f}.project-info .code-content{background-color:var(--terminal-bg);padding:15px;overflow-x:auto}.project-info .code-content pre{margin:0;font-family:var(--code-font);color:var(--primary-color);line-height:1.6;font-size:.9rem}body.dark-theme .project-details{background-color:var(--bg-color)}.code-snippet,body.dark-theme .tech-stack span{color:var(--primary-color)}body.dark-theme .main-image{box-shadow:0 5px 20px rgba(0,255,65,.1)}body.dark-theme .nav-project{background-color:var(--light-bg)}body.dark-theme .nav-project:hover,body.dark-theme .tech-stack span{background-color:var(--dark-bg);border-color:var(--primary-color)}body.dark-theme .project-navigation{background-color:var(--dark-bg);border-color:rgba(0,255,65,.2)}body.dark-theme .project-info::before{content:"";position:absolute;top:0;right:-20px;width:100px;height:100px;background:radial-gradient(circle,rgba(0,255,65,.1)0,transparent 70%);pointer-events:none;z-index:-1}@media screen and (max-width:992px){.project-content{grid-template-columns:1fr}.project-gallery{margin-bottom:30px;order:1}.project-info{order:2}.project-title h1{font-size:3rem}}@media screen and (max-width:768px){.project-title h1{font-size:2.5rem}.project-meta{align-items:center}.project-meta,.project-navigation .container{flex-direction:column;gap:15px}.nav-project{width:100%}}@media screen and (max-width:576px){.project-title h1{font-size:2rem}.thumbnail{width:60px;height:45px}.project-info h2{font-size:1.8rem}.project-info h3{font-size:1.3rem}.project-video{padding:15px;margin-top:25px}.project-video h3{font-size:1.2rem}}