/* ==========================================================================
   Services page — premium "Website Design & Development" slider
   (scoped: loaded only on services.php)
   ========================================================================== */

.section-12{position:relative;overflow:hidden}
.section-12 .webSlider{position:relative;padding:0 0 6px}
.section-12 .webSlider .swiper{overflow:visible;padding:40px 0 26px}
.section-12 .webSlider .swiper-wrapper{align-items:center}

/* --- Slides: active is full & crisp, neighbours scale down + dim --- */
.section-12 .webSlider .swiper-slide{
    width:560px;max-width:84vw;height:auto;
    transform:scale(.82);opacity:.4;filter:saturate(.75);
    transition:transform .65s cubic-bezier(.22,.61,.36,1),opacity .55s ease,filter .55s ease;
}
.section-12 .webSlider .swiper-slide-active{transform:scale(1);opacity:1;filter:none}

.section-12 .webSlider .swiper-slide a{
    display:block;position:relative;border-radius:20px;overflow:hidden;
    box-shadow:0 34px 70px -24px rgba(20,10,80,.5);
}
.section-12 .webSlider .swiper-slide img{
    display:block;width:100%;height:360px;object-fit:cover;object-position:top center;
    border-radius:20px;transition:transform .7s cubic-bezier(.22,.61,.36,1);
}

/* hover reveal (only on the focused slide) */
.section-12 .webSlider .swiper-slide a::after{
    content:"VIEW";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;letter-spacing:4px;color:#fff;
    background:linear-gradient(to top,rgba(30,8,196,.55),rgba(20,10,80,.12));
    opacity:0;transition:opacity .45s ease;border-radius:20px;
}
.section-12 .webSlider .swiper-slide-active a:hover::after{opacity:1}
.section-12 .webSlider .swiper-slide-active a:hover img{transform:scale(1.06)}

/* --- Pagination: gradient pill on active --- */
.section-12 .webSlider .swiper-pagination{position:relative;margin-top:26px;bottom:auto!important}
.section-12 .webSlider .swiper-pagination-bullet{
    width:9px;height:9px;background:#c9cbe0;opacity:1;
    transition:width .35s ease,background .35s ease;
}
.section-12 .webSlider .swiper-pagination-bullet-active{
    width:30px;border-radius:5px;background:linear-gradient(135deg,#1e08c4,#21c7f7);
}

/* --- Navigation arrows --- */
.section-12 .ws-arrow{
    position:absolute;top:44%;transform:translateY(-50%);z-index:6;
    width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;font-size:16px;
    background:#fff;color:#1e08c4;box-shadow:0 12px 30px rgba(20,10,80,.16);
    transition:transform .3s ease,background .3s ease,color .3s ease;
}
.section-12 .ws-prev{left:3%}
.section-12 .ws-next{right:3%}
.section-12 .ws-arrow:hover{background:linear-gradient(135deg,#1e08c4,#21c7f7);color:#fff;transform:translateY(-50%) scale(1.1)}
.section-12 .ws-arrow:active{transform:translateY(-50%) scale(.95)}

@media(max-width:767px){
    .section-12 .webSlider .swiper-slide img{height:225px}
    .section-12 .ws-arrow{width:44px;height:44px;font-size:14px}
    .section-12 .ws-prev{left:1%}
    .section-12 .ws-next{right:1%}
}