.hero-section{position:relative;background:url(../assets/images/hero-banners/portfolio/portfolio-bg.webp) no-repeat center center/cover;color:#222;height:700px}.hero-section::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.7);z-index:1}.hero-content{position:relative;z-index:2;background:#fff;padding:20px;background-image:url(../assets/images/hero-banners/portfolio/bg-above.webp);background-size:cover}.hero-content h1{font-weight:700;font-size:2rem}.hero-content p{color:#444;margin:15px 0 25px}.tech-badge{background:#e9f0f5;border-radius:5px;padding:5px 12px;margin-right:8px;display:inline-block}.phone-img{position:relative;z-index:2;max-width:100%;height:500px}.r-0{right:0}.portfolio-section{padding:60px 0;text-align:center}.portfolio-section h2{font-weight:700;color:#1b1464}.filter-btns{display:flex;justify-content:center;gap:10px}.filter-btns .btn{margin:-3px;padding:8px 18px;font-weight:500;background-color:#b7e0ff}.filter-btns .btn.active{background:linear-gradient(170deg,#29abe2,#1b1464);color:#fff!important}.filter-btns .filter-btn:hover{background:linear-gradient(170deg,#1b1464,#29abe2);color:#fff!important;transition:.5s}.portfolio-item{position:relative;overflow:hidden;border-radius:10px;cursor:pointer}.portfolio-item .project-img{width:100%;transition:transform .4s ease;border-radius:10px;height:350px}.portfolio-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;opacity:0;transition:opacity .4s ease;padding:20px}.portfolio-item:hover .portfolio-overlay{opacity:1}.portfolio-overlay h5{font-size:20px;margin-bottom:10px}.portfolio-overlay p{font-size:14px;margin-bottom:15px}.learn-more{font-size:14px}