/* ==========================================================================
   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%}
}

/* App Design section: two app screenshots side-by-side on ALL screens */

/* ==========================================================================
   Client round 3 (Aug 26 2026) — services page typography & rhythm
   Loaded after custom.min.css, so equal-specificity rules here win.
   ========================================================================== */

/* Every section heading on this page sits at 55px (client request). The base
   sheet scopes these per section (.section-7 .content h2 etc., 0-2-1), so each
   override below has to match that weight rather than rely on .page-services h2. */
.page-services .content h2,
.page-services .section-12 h2 {
    font-size: 3.4375rem; /* 55px */
    line-height: 1.1;
}

/* At 55px a heading needs the whole column. The base sheet holds .content to
   80%, which was throwing headings onto an extra line for no reason. */
.page-services .section-7 .content,
.page-services .section-11 .content,
.page-services .section-13 .content {
    width: 100%;
}

/* Where a heading still has to take two lines, split it evenly instead of
   leaving one word stranded on the second line. */
.page-services .content h2,
.page-services .section-12 h2 {
    text-wrap: balance;
}

/* Gap under every heading, and under every description (client request). */
.page-services .content h2 {
    margin-bottom: 1.5rem;
}

.page-services .content p {
    margin-bottom: 0;
    padding-bottom: 1.75rem;
}

/* Gap between the heading and the artwork beneath it — the Website Design
   slider sits directly under its heading. */
.page-services .section-12 h2 {
    margin-bottom: 2.75rem;
}

/* Video Animations: a little smaller, held to the right of its column.
   The base sheet pulls `.section-13 .aniamtion-img` left by 20% of its own
   width, which was sized for the home page artwork — on this page it dragged
   the video across the gutter and straight through the 55px heading. Reset that
   and right-align instead, so the video lines up with the container edge and
   the gap falls between it and the copy rather than out at the margin. */
.page-services .section-13 .video-sample {
    left: 0;
    margin-left: auto;
    margin-right: 0;
    max-width: 86%;
}

.page-services .section-13 .video-sample video {
    width: 100%;
    height: auto;
    border-radius: 14px;
}

@media (max-width: 991px) {
    /* Columns stack here, so the image lands directly above the heading and the
       two need separating; the leftward video offset stops making sense. */
    .page-services .content h2,
    .page-services .section-12 h2 {
        font-size: 2.5rem;
    }

    .page-services .section-7 figure,
    .page-services .section-11 figure,
    .page-services .section-13 figure {
        margin-bottom: 2.25rem;
    }

    .page-services .section-13 .video-sample {
        left: 0;
        max-width: 100%;
    }
}