.container{max-width:1300px;margin:0 auto;padding:0 20px}.main-content{flex-grow:1;display:flex;flex-direction:column;overflow:hidden}.hero-layanan{position:relative;height:400px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--color-white)}.hero-layanan:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(https://narubranchtech.id/build/assets/Hero-CPZmLyCq.png);background-size:cover;background-position:center;filter:brightness(.8);z-index:1}.hero-content{position:relative;z-index:2;text-align:center;padding:0 1rem}.hero-content h1{font-size:var(--font-size-subtitle);margin-bottom:1.5rem;color:var(--color-white)}.button-group{display:flex;justify-content:center;flex-wrap:wrap;gap:1.25rem;margin-top:2rem}.hero-button{display:inline-block;padding:.8rem 2rem;border:2px solid #ff5c39;border-radius:.25rem;background-color:transparent;color:#ff5c39;font-weight:600;font-size:1rem;width:124px;letter-spacing:.4px;text-decoration:none;transition:all .25s ease}.hero-button:hover{background-color:#ff5c391a;transform:translateY(-1px)}.hero-button.active{background-color:#ff5c39;color:#fff;box-shadow:0 4px 10px #ff5c394d}.reviews{position:relative;margin:4rem auto;padding:40px 0;color:var(--color-white);overflow:hidden;background-color:#0c1c20}.review-carousel{position:relative;overflow:hidden}.carousel-track{display:flex;gap:20px;width:max-content;animation:scroll-left 30s linear infinite}.review-card{min-width:300px;flex-shrink:0;border:2px solid var(--color-primary);border-radius:10px;padding:20px 25px;transition:transform .3s ease}.review-carousel:before,.review-carousel:after{content:"";position:absolute;top:0;width:150px;height:100%;z-index:3;pointer-events:none}.review-carousel:before{left:0;background:linear-gradient(to right,#0c1c20 10%,transparent 100%)}.review-carousel:after{right:0;background:linear-gradient(to left,#0c1c20 10%,transparent 100%)}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-50%)}}.review-carousel:hover .carousel-track{animation-play-state:paused}.fade{position:absolute;top:0;width:100px;height:100%;z-index:2;pointer-events:none}.fade-left{left:0;background:linear-gradient(to right,#0c1c20 0%,transparent 100%)}.fade-right{right:0;background:linear-gradient(to left,#0c1c20 0%,transparent 100%)}.portfolio-content{flex-grow:1;flex-direction:column;overflow:hidden}.portfolio-content h1{display:flex;justify-content:center}.portfolio-kategori{flex-shrink:0;display:flex;align-items:center;padding-top:1rem;padding-bottom:2.5rem}.filter{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}.filter-btn{padding:.6rem 1.5rem;border:2px solid #ff5c39;background-color:transparent;color:#ff5c39;font-weight:600;font-size:.95rem;letter-spacing:.3px;cursor:pointer;transition:all .25s ease}.filter-btn:hover{background-color:#ff5c391a;transform:translateY(-1px)}.filter-btn.active{background-color:#ff5c39;color:#fff;box-shadow:0 3px 8px #ff5c394d}.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:7rem}.portfolio-item{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;aspect-ratio:1 / 1}.portfolio-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.portfolio-overlay{position:absolute;top:70%;left:0;width:100%;height:30%;background:#00000072;color:var(--color-white);opacity:0;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .35s ease}.portfolio-item:hover .portfolio-overlay{opacity:1}.portfolio-item:hover img{transform:scale(1.05)}.portfolio-overlay h3{color:var(--color-white);margin-top:0;margin-bottom:1rem}.view-detail{display:flex;align-items:center;gap:.4rem;opacity:0;transform:translateY(10px);transition:all .3s ease;font-weight:600;font-size:.95rem}.portfolio-item:hover .view-detail{opacity:1;transform:translateY(0)}.view-detail a{display:flex;align-items:center;gap:.4rem;color:#fff!important;text-decoration:none!important;transition:color .3s ease}.view-detail a:hover{color:#fff!important;text-decoration:none!important}.view-detail i{font-size:.9rem;transition:transform .3s ease}.view-detail:hover i{transform:translate(4px)}@media(max-width:768px){.hero-layanan{height:350px}.hero-content h1{font-size:2.5rem}.reviews{margin:2.5rem 1.5rem;padding-top:0}.reviews-grid{grid-template-columns:1fr;gap:25px}.portfolio-kategori{justify-content:center}.portfolio-grid{grid-template-columns:repeat(2,1fr);margin-bottom:4rem}.portfolio-overlay{top:60%;height:40%}.portfolio-overlay h3{font-size:1rem;margin-bottom:.5rem}.portfolio-item:hover img{transform:scale(1.05)}}