.ctainer{width:100%;background-color:#000;color:#fff;text-align:center;font-family:Arial,sans-serif;min-height:50vh;padding:20px 0;overflow-x:hidden}
.ttitle{margin:30px 0;font-size:2rem;font-weight:700;letter-spacing:1.5px;background:linear-gradient(90deg,#fff,#aaa);-webkit-background-clip:text;background-clip:text;color:transparent}
.showcase-wrapper{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;position:relative}
.projects-container{position:relative;overflow:visible;padding:20px 0}
.projects-wrapper{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;padding:20px 10px;scroll-snap-type:x mandatory;mask-image:linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%)}
.projects-wrapper::-webkit-scrollbar{display:none}
.project-card{position:relative;flex:0 0 auto;width:220px;height:200px;background:#111;border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;scroll-snap-align:center;padding:20px;cursor:pointer;transition:transform .4s cubic-bezier(.175, .885, .32, 1.275),box-shadow .4s ease,background-color .3s ease;box-shadow:0 4px 6px rgba(255,255,255,.1),0 1px 3px rgba(255,255,255,.08);overflow:hidden}
.project-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent 65%,rgba(255,255,255,.03) 100%);z-index:1}
.project-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 6px 12px rgba(255,255,255,.15),0 3px 6px rgba(255,255,255,.1);background-color:#151515}
.project-icon{font-size:2.5rem;margin-bottom:12px;color:#fff;transition:transform .4s cubic-bezier(.68, -.55, .265, 1.55),color .3s ease;position:relative;z-index:2}
.project-card:hover .project-icon{transform:scale(1.15);color:#fff}
.project-title{font-size:1rem;margin:8px 0;font-weight:500;transition:color .3s ease;position:relative;z-index:2}
.project-card:hover .project-title{color:#fff}
.view-button{opacity:0;position:absolute;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);width:75%;color:#111;background:#fff;padding:10px;font-size:.9rem;border-radius:20px;cursor:pointer;transition:opacity .3s ease,transform .4s cubic-bezier(.175, .885, .32, 1.275),box-shadow .3s ease;z-index:2;font-weight:600;overflow:hidden}
.view-button::after{content:'';position:absolute;top:0;right:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,166,0,.7));border-radius:0 20px 20px 0;z-index:-1}
.project-card.active .view-button{opacity:1;transform:translateX(-50%) translateY(0)}
.view-button:hover{box-shadow:0 0 15px rgba(255,166,0,.4)}
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.05);border:none;color:#fff;width:40px;height:40px;cursor:pointer;border-radius:50%;transition:background .3s ease,transform .3s ease;font-size:1rem;z-index:10;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(2px)}
.slider-btn:hover{background:rgba(255,255,255,.15);transform:translateY(-50%) scale(1.1)}
.left-btn{left:5px}
.right-btn{right:5px}
.dots{display:flex;justify-content:center;margin-top:20px;gap:8px}
.dot{width:8px;height:8px;background:#333;border-radius:50%;cursor:pointer;transition:all .3s cubic-bezier(.175, .885, .32, 1.275)}
.dot.active{background:#fff;transform:scale(1.3);box-shadow:0 0 10px rgba(255,255,255,.5)}
@media (max-width:768px){
.projects-wrapper{gap:15px;padding:15px 5px}
.project-card{width:180px;height:180px}
.project-icon{font-size:2.2rem}
.view-button{font-size:.8rem;padding:8px}
}
@media (max-width:480px){
.projects-wrapper{gap:12px}
.project-card{width:150px;height:160px}
.project-icon{font-size:2rem}
.project-title{font-size:.9rem}
.slider-btn{width:32px;height:32px;font-size:.8rem}
}
@media (min-width:1200px){
.projects-wrapper{padding:30px 40px}
}