@media (max-width: 8000px) {}
body{background: white;}

body::-webkit-scrollbar{display:none;}
/* Reel-Box Benar */
.reel-box{width:98%; height:350px; box-shadow: inset 0 0 10px rgba(0,0,0,0.5), inset 0 4px 20px rgba(0,0,0,0.8); border:; 3px solid; overflow:hidden;border-radius:8px;touch-action:pan-y;cursor: grab;margin:auto;margin-top: 70px;}
.reel-box::before{content: "";position: absolute;left: 0.8%;width: 20px;height: 350px;border-bottom-left-radius: 8px;border-top-left-radius: 8px;background: linear-gradient(to right,rgba(0,0,0,0.50),transparent);z-index: 10;pointer-events: none;}
.reel-box::after{content: "";position: absolute;top: 70px;right: 0.8%;width: 20px;height: 350px;border-bottom-right-radius: 8px;border-top-right-radius: 8px;background: linear-gradient(to left,rgba(0,0,0,0.45),transparent);z-index: 10;pointer-events: none;}
.reel-track{display:flex;height:100%;padding: 0; will-change:transform;}
.reel{width:100%;height:100%;flex-shrink:0;padding: 0;display:flex;align-items:center;justify-content:center;user-select:none;}
.reel img{width:99%;height:98%;margin: auto;border-radius:8px; object-fit:;cover;pointer-events:none; -webkit-user-drag:none;user-select:none;}
.dots{text-align:center;margin-top:1px;}
.dot{width:10px;height:5px;border-radius:50px;background:#F709C2;display:inline-block;margin:3px;transition:.3s;}
.dot.active{width:30px;background:#000;}
@media(max-width:525px){
.reel-box{width:98%;height:250px;border:;1.5px solid #000;border-radius:6px;margin-top:55px}
.reel-box::before{content: "";position: absolute;left: 0.8%;width: 20px;height: 250px;border-bottom-left-radius: 8px;border-top-left-radius: 8px;background: linear-gradient( to right, rgba(0,0,0,0.50), transparent);z-index: 10;pointer-events: none;}
.reel-box::after{content: "";position: absolute;top: 55px;right: 0.8%;width: 20px;height: 250px;border-bottom-right-radius: 8px;border-top-right-radius: 8px;background: linear-gradient( to left, rgba(0,0,0,0.45), transparent);z-index: 10;pointer-events: none;}
.reel img{width:96%;height:96%;margin: auto;border-radius:8px;}
}
/* Service-Slider Benar */
.slider-container{width:78%;margin:0px;float: left; position:relative;background: white;margin-left: 2%;border-radius: 8px;}
.slider-viewport{overflow:hidden;background: #fff8ea;border-radius:8px; }
.service-track{display:flex;gap:12px;transition:transform .4s ease;padding: 3px;}
.service-card{min-width:18.8%;user-select: none; background:#fff;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.2);overflow:hidden;}
.service-card img{width:96%;height:150px;margin: 2%;border-radius: 8px;}
.service-card h4{padding:8px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.service-card strong{padding:0 8px;display:block;}
.service-card a{display:block;margin:8px;padding:8px;background:#9333ea;color:#fff;text-align:center;text-decoration:none;border-radius:6px;font-size:14px;}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:none;font-size:25px;padding:30px 10px 30px 10px;cursor:pointer;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.2);}
#servicePrev{ left:-5px; z-index: 10;}
#serviceNext{ right:-5px; }
.ad{width: 18%; margin-left: 1%; border-radius: 8px; background: #fce4ec; box-shadow: 0 2px 2px 2px; height: 270px;background:;none; float: left;}
.ad img{width: 99%;height: 270px;padding:5px;}
/* =====================
   📱 MOBILE 50% SIZE
===================== */
@media (max-width: 992px) {
.service-card{min-width: 32%;}
.slider-container{width: 98%;margin: auto;}
.ad{height: 300px;background: goldenrod; display: none;}
.ad img{width: 100%; height: 265px;}
}
@media (max-width: 525px) {
.slider-container{width: 100%;margin: auto;}
.service-track{display:flex;gap:12px;transition:transform .4s ease;padding: 3px;}
.service-card{min-width: 47.5%;}
.service-card img{height: 180px;}
.ad{height: 200px;background: goldenrod;}
.ad img{width: 100%; height: 178px;}

}
/* Service-Container Benar */
.contine{  width: 100%; float: left; margin-left: 0%; overflow: auto; background: #eaeded;}
.container{width: 32%;overflow: auto;box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.5); padding: 10px; float: left;margin: 0.5%;background:white;border-radius:12px;}
.product-off{width:85%; border-radius: 8px; padding: 4%; background:#eaeded; overflow: auto; margin: auto;}
.container a {text-decoration: none;color: black;}
.car{width: 48%;height: 180px;background:white;border-radius:12px;box-shadow:0 8px 25px rgba(0,0,0,.1);overflow:hidden;transition:.3s;float: left;margin: 1%;box-shadow:1px 4px 5px rgba(0,0,0,.5);}
.car:hover{transform:translateY(-5px);}
.car img{width: 100%;height:100px;object-fit:cover;padding: 2%;border-radius:12px;clip-path: polygon(0 0,100% 0,100% 85%,50% 100%,0 85%);}
.card-body{padding:10px;text-align:center;}
.card-body h4{margin:5px 0;font-size:16px;}
.badges{display:inline-block;background:#007bff;color:#fff;padding:4px 8px;border-radius:20px;font-size:12px;}
@media(max-width: 992px) {
.container{width: 96%;margin: 2%;padding: 2%;}
}
@media(max-width: 525px) {
.container{background:white;width: 96%;padding: 2%;}
.product-off{width:96%; border-radius: 8px; padding: 2%; background:#eaeded; overflow: auto; margin: auto;}
.car{ width: 45%; height: 180px;margin: 2.5%; background:#f6e1e1;white;box-shadow:0 2px 2px rgba(0,0,0,.5);}
.car img{width: 100%;height:100px;margin: auto;margin:none;clip-path:none;}
}
/* Service-H-Scroll Benar */
/* ================= HORIZONTAL ICONS ================= */
.h-scroll{display: none;width: 98%;overflow-x:auto;padding:5px;margin-left:1%;margin: auto;}
.h-scroll::-webkit-scrollbar{display:none}
.icon-box{width:20%;background:#fff;border-radius:12px;text-align:;center;margin-left: 0.5%;box-shadow:0 2px 6px rgba(0,0,0,.1);}
.carda{width:96%;overflow: auto; border-radius:14px;box-shadow:0 2px 2px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column;margin: 2%;padding: 2%;}
.carda img{width:100%;height:160px;border-radius:5px;object-fit:cover;background: rgba(204, 204, 204, 0.3);clip-path:; polygon(0 0,100% 0,100% 85%,50% 100%,0 85%);}
.carda .title{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 12px;font-weight: bold;}
.carda strong{font-size: 13px;font-weight: bold;margin-left: 0%;}
.description{text-overflow: ellipsis;white-space: nowrap;overflow: hidden; font-size: 12px; margin-left: 5%; width: 90%; margin-top: 3%;}
.carda a{margin:5px;padding:10px;text-align:center;background:#9333ea;font-size: 15px;font-weight: bold;opacity: 0.8;color:#fff;text-decoration:none;border-radius:10px;margin-bottom: 0px;clip-path:; polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%,0% 0%);}
/* ================= HORIZONTAL ICONS ================= */
@media(max-width: 768px) {
.h-scroll{width: 100%; display: block;display: flex;}
.icon-box{width:35%;}
.carda .title{font-size: 18px;}
.carda strong {font-size: 16px;}
.carda strong sup{color: green;}
}
/* ================= HORIZONTAL ICONS ================= */
@media(max-width: 525px) {
.icon-box{width:46%;margin-bottom: 1%;}
.carda{ border-radius:7px;}
.carda .title{font-size: 15px;padding-left: 3%;margin-top: }
.carda strong{font-size: 13px;margin-left: 3%;margin-top: 1%;}
.carda a{padding:8px;font-size: 13px;}
.description{font-size: 12px; margin-left: 5%; width: 90%; margin-top: 3%;}
}