@media(max-width:1920px){
    .statue_laborty {top: 23px;}
   
}
@media(max-width:1600px){
    .work_clm img {min-height: 567px !important;}
    .fs_172px {font-size: 7.5vw;}
    section.results .fs_100px {font-size: 4.4vw; }
    .tab_clm {min-height: 600px; }
   
}

@media(max-width:1537px){
    .heading_img {height: 5.3vw; top: -11px; }
   /*.fs_190px {font-size: 7.930vw; }*/
   .fs_327px {font-size: 16.4vw; }
   .statue_laborty {right: 18.3vw;top: 9px;width: 4.5vw;}
   .submit_btn {width: 70% !important; }
   .themeBtn {font-size: 16px; }
   .testimonials_slider .item {min-height: 515px; display: grid; align-content: space-between; }
   section.form__section .expert_clm {width: max-content; }
   ul.slick-dots {left: 16%; width: 84%; }
   .timeline_clm {min-height: 440px;}
   .vid_wrap {height: 810px; }
   .timeline_clm p {font-size: 14px; }
}



@media(max-width:1490px){
    .fs_172px {font-size: 6.5vw;}
    section.case_studies {height: 120vh !important; }
    .arrow_down {right: 10%; }
    .slider-inner .location_content, .img-slider-container {height: 600px; }
    section.single_service_banner .fs_40px {font-size: 1.9vw; }
    .heading_img {height: 5.3vw; top: -8px; margin-right: -14px; margin-left: 4px; width: 8vw; }
    
    .fs_149px {font-size: 7.5vw; }
    section#work .tag {font-size: 13px; }


}

@media(max-width:1367px){
    .fs_172px {font-size: 6.2vw;}
    .hotspot.ali_zafar {flex-direction: row-reverse; right: 250px; }
    .statue_laborty {right: 18.2vw;top: 8px;width: 4.6vw;}
    .content_hover p {padding-right: 20%; }
    .lets_talk_form {padding: 0 30px; }
    .submit_btn {width: 50% !important;}
    .client_img {width: 130px !important; }
    .testimonials_slider .item {min-height: 496px; }
    .social_link {width: 70px; height: 40px; }
    section.case_studies .case_text {margin: -20px auto; }
    .timeline_clm {min-height: 395px; }
    .themeBtn {font-size: 13px;}
    .themeBtn .arrow_circle {width: 40px;/* height: 40px; */}
    .themeBtn .arrow_circle img {width: 12px; }
    .themeBtn .btnText {padding: 0px !important;}

    .work_clm img {min-height: 504px !important; }
    ul.slick-dots {left: 18%; width: 82%; bottom: 12px; }
    .vid_wrap {height: 770px; }
    section.awardsLight .arrow_down {right: 9% !important; width: 30px !important; }
        
}


@media(max-width: 1280px) {
    .fs_172px {font-size: 5.443vw;}
    .statue_laborty {right: 17.8vw;top: 3.6vw;width: 5.1vw;}
    .fs_327px {font-size: 16.163vw;line-height: 16.163vw;}
    .pinClm {padding: 30px; }
    .submit_btn {width: 60% !important; }
    .lets_talk_form {padding: 0 17px; }
    
    .location_image_slider .fs_16px {font-size: 12px; }
    footer .img_wrap {min-height: 70px; padding: 0 25px; }
    img.awards_img {width: 250px; }
    .awards_row.active .awards_img {height: 265px; }
    section.case_studies .case_text {margin: -10px auto; }
    .timeline_clm {min-height: 395px; }
    .work_clm img {min-height: 470px !important; } 
    .vid_wrap {height: 710px; }
    .tab_clm {min-height: 500px; }
}
@media(max-width: 1200px) {
    .statue_laborty {right: 18vw;top: 4.8vw;width: 5.1vw;}
    .vid_wrap {height: 670px; }

}

@media(max-width: 1199px) {
    .timeline_clm {min-height: 400px; }
    .bars-container {margin-bottom: -31px; }
    .blogs_slider .item .fs_30px {font-size: 1.963vw; }
    .blogs_slider .item span {font-size: 14px; }
    body {font-size: 1.100vw; }
    .fs_100px {font-size: 4.7vw; }
    .fs_48px {font-size: 2.3vw; }
    .work_clm img {min-height: 400px !important; }
    .tag {font-size: 0.750vw; }
    .fs_14px {font-size: 1.200vw; }
    .fs_18px {font-size: 1.300vw; }
    .fs_20px {font-size: 1.400vw; }
    .profile .fs_20px {font-size: 2vw !important; }
    .fs_190px {font-size: 7.600vw; }
    section.locations .fs_16px {font-size: 14px !important;}
    section.locations .addressWrap .fs_16px {font-size: 16px !important;}
    .checkmark {padding: 7px 10px; font-size: 14px; }
}

@media(max-width: 1110px) {
    section.case_studies {height: 90vh !important; }
    
    .statue_laborty {right: 19vw;top: 0.9vw;width: 5.1vw;}
    .jack_willson {left: 90px; }
    .ali_zafar {right: 240px !important;bottom: 180px;}
    .victoria_horsley {left: 313px;bottom: 260px;}
    .hotspot__content {padding: 20px; }
    .hotspot {width: 385px; }
    .hotspot .fs_30px {font-size: 22px; }
    .vid_wrap {height: 610px; }
    section.tech_stack p {padding-right: 35%; }

}
@media(max-width: 1030px) {
    section.locations .addressWrap .fs_16px {font-size: 12px !important; }
    section.locations .addressWrap .fs_16px br{display: none; }
    .fs_172px {font-size: 8.804vw; }
    .ali_zafar {right: 200px !important; bottom: 95px; }
    .victoria_horsley {left: 273px; bottom: 200px; }
    .jack_willson {left: 80px; top: 200px; }
    .palamarchuk_natalia {right: 64px; top: 220px; bottom: unset; }
    .vid_wrap {height: 560px; }
    /*section.awardsLight .arrow_down {display: none !important; }*/
    section.awardsLight .awards_logo {width: 140px !important; filter: brightness(0); }
    section.results .fs_100px {font-size: 4.2vw; }
    
}



@media(max-width: 992px) {
    .fs_172px {font-size: 17.924vw;}
    .fs_190px {font-size: 7.400vw; }
    section {padding-top: 50px; padding-bottom: 50px; }
    .tag {font-size: 11px; }
    body {font-size: 14px; }
    .fs_120px {font-size: 80px; }
    .fs_100px {font-size: 70px; }
    .fs_70px {font-size: 60px; }
    .fs_58px {font-size: 50px; }
    .fs_40px {font-size: 40px; }
    .fs_36px {font-size: 25px; }
    .fs_30px {font-size: 30px; }
    .fs_24px {font-size: 20px; }
    .fs_20px {font-size: 18px; }
    .fs_18px {font-size: 15px; }
    .fs_16px {font-size: 15px; }
    .fs_14px {font-size: 12px; }
    .work_clm img {min-height: 313px !important; }
    .btns_wrap {margin-top: 10px;}
    .content_hover p {padding-right: 0; }
    section.awards .fs_20px {font-size: 12px; }
    .awards_row.active .awards_img {height: 155px; width: 130px; }
    section.awards .fs_120px {font-size: 50px; }
    .awards_logo {width: 110px !important; }
    section.why_prox .shaddowTop {box-shadow: 0px -80px 80px 0px #f4f4f4; margin-top: 20px; }
    section.tabs_sec .tab_clm {height: 780px !important; }
    .timeline_clm {min-height: 470px; display: grid !important; align-content: space-between !important; }
    .location_txt_slider .item .fs_80px {line-height: 40px; }
    section.form__section .expert_clm {width: 100%;text-align: left;}
    footer .img_wrap {min-height: 100px;padding: 0 20px;width: 150px;}
    .prox_cotainer {margin-bottom: 0px; }
    .left__container {padding-left: 32px; padding-right: 32px; }
    section.blogs .fs_30px {font-size: 18px; }
    .our_work_slider {padding: 0 15px; }
    .faqs_clm {position: relative !important; top: 0; } 
    section.the__team {position: relative; top: 0; }

    section.proof__beats button.slick-prev {left: 15px; } 
    section.proof__beats button.slick-next {right: 15px; }
    ul.slick-dots {left: 0; bottom: 12px; right: 0; width: 100%; justify-content: center; }
    .slick-dots li {transition: .3s !important; }
    .slick-dots li button {transition: .3s !important; font-size: 14px !important;}
    .slick-dots li button:before {transition: .3s; }

    button.slick-arrow {background-color: #1D1D1D !important;border: none;color: #fff;padding: 20px 30px;border-radius: 50px;position: absolute;top: unset;right: 0;z-index: 999;display: flex;justify-content: center;align-items: center;bottom: 0px;}
    button.slick-prev {left: 0; }
    /* Colour only - the dots' geometry is set once at the end of this sheet. */
    section.tab_sec .slick-dots li button:before, section.timeline .slick-dots li button:before, section.proof__beats .slick-dots li button:before {
        background-color: #000 !important;
    }
    .themeBtn {font-size: 13px; justify-content: center; display: inline-flex; width: max-content !important; }

    section.client_video .fs_100px {font-size: 56px; }
    section.client_video .fs_48px {font-size: 28px !important; }

    section.tech_stack p {padding-right: 0% !important; }
    section.form__section p {padding-right: 0% !important; }
    .blogs_slider .item .fs_30px {font-size: 20px; }
}

@media(max-width: 768px) {
    body {font-size: 14px; } 
    h1 {font-size: 36px; } 
    h2 {font-size: 30px;} 
    h3 {font-size: 22px; } 
    h4 {font-size: 19px;} 
    h5 {font-size: 17px; } 
    h6 {font-size: 16px; } 
    p{font-size: 16px;color: #303030;} 
    br{display: none; }
    .fs_172px {font-size: 22.405vw;}
    .footer {padding: 40px 0 20px; } 
    .btn_set a {margin-bottom: 10px; font-size: 14px !important; } 
    .btn_set a:last-child{margin-bottom: 0; } 
    .btn_set {display: block;column-gap: 15px;align-items: center;}

    .my__container, .left__container {padding-left: 20px; padding-right: 20px; padding-top: 0; padding-bottom: 0; }

    header {padding: 10px 0; }
    /*.fs_190px {font-size: 7.4vw; }*/
    .arry:before, .arry:after {top: -2px; }
    .vid_wrap {height: 420px; }
    span.twoThousandTwintySix {display: none; }
    .profile .fs_20px {font-size: 23px !important;}
    section.who__we__are .shaddowTop {box-shadow: 0px -60px 60px 0px #f4f4f4; margin-top: 0px; }
    .work_clm img {min-height: auto !important; }
    .submit_btn {width: 100% !important; }
    .input {border: 1.5px solid rgba(205, 205, 205, 0.50); }
    .teams_img {width: 100% !important; height: 750px !important; object-fit: contain; object-position: top; }
    .team__wrapper {display: table !important;}
    .hotspot__content {backdrop-filter: blur(10px);min-height: 210px;display: grid;}
    .the__team {padding-bottom: 50px !important;padding-top: 60px !important;overflow: hidden;}
    .themeBtn .arrow_circle {width: 47px; }
    .profile h6 {margin-bottom: 7px; font-size: 12px; }
    .profile p {font-size: 12px; margin-bottom: 7px; }
    
    ul.slick-dots {left: 0;bottom: 26px;right: 0;width: 100%;justify-content: center;}
    .slick-dots li {transition: .3s !important; }
    .slick-dots li button {transition: .3s !important; font-size: 14px !important;}
    .slick-dots li button:before {transition: .3s; }

    button.slick-arrow {background-color: #1D1D1D !important;border: none;color: #fff;padding: 20px 30px;border-radius: 50px;position: absolute;top: unset;right: 0;z-index: 999;display: flex;justify-content: center;align-items: center;bottom: 0px;}
    button.slick-prev {left: 0; }

    /* Colour only, for the bands that sit on a light ground - the geometry of
       these dots is set once at the end of this sheet. */
    section.real_pr .slick-dots li.slick-active button, section.tab_sec .slick-dots li.slick-active button, section.timeline .slick-dots li.slick-active button, section.proof__beats .slick-dots li.slick-active button {color: #000 !important; }

    section.real_pr .slick-dots li button:before, section.tab_sec .slick-dots li button:before, section.timeline .slick-dots li button:before, section.proof__beats .slick-dots li button:before {background-color: #000 !important; }

    section.real_pr .slick-dots li button, section.tab_sec .slick-dots li button, section.timeline .slick-dots li button, section.proof__beats .slick-dots li button {color: #00000054 !important; font-size: 14px !important; }

    section.tab_sec ul.slick-dots {margin-top: 55px;}

    

    section.other__services button.next.slick-arrow {left: 0; right: unset; }
    .themeBtn .arrow_circle img {width: 15px; }
    .fs_120px {font-size: 35px; }
    button.slick-arrow,button.slick-prev {padding: 18px 26px;background-repeat: no-repeat !important;background-position: center !important;}
    .sliderBtns button.slick-arrow {padding: 14px 26px;}
    .sliderBtns {justify-content: space-between; width: 100% !important;}
    .the__team button.slick-arrow {padding: 18px 27px; }
    .slick__arrows button.slick-arrow {padding: 14px 30px; }
    .checkWrapper {justify-content: center;}


    footer form.newsletter input {border: none !important; margin: 0; border-radius: 50px !important; border: none; background-color: #282828 !important; padding: 10px 20px; color: #fff; font-size: 15px; }

    footer .accordion-header button {padding: 22px;font-weight: 600;padding: 12px 10px;background-color: transparent !important;color: #646565 !important;font-size: 20px;}
    footer .accordion-item {border-radius: 0px !important; background-color: transparent; border-top: 1px solid; border-bottom: 1px solid; margin: 0 !important;}
    footer .accordion-body {color: #646565;text-align: left;}
    footer .accordion-button::after {top: 0px; filter: brightness(0) invert(1); }

    .fs_38px {font-size: 3.979vw; }
    .iconsWrap {justify-content: center; }
    .other__services_slider .slick-track, .testimonials_slider .slick-track, .blogs_slider .slick-track {transition: .3s !important;}
    .testimonials_slider .slick-track .item {min-height: auto !important; display: inline-block; }
    section.testimonials .themeBtn {width: 100%; } section.testimonials .themeBtn .btnText {width: 100%; }
    .blogs_slider ul.slick-dots {justify-content: center; left: 0; right: 0 !important;}
    .themeBtn {/*display: flex !important;*/justify-content: center;align-items: center !important;width: 100% !important;padding: 12px 0 !important;}
    .lets_talk_form .input {width: 100%; }

    .pagination {justify-content: center !important;display: flex;left: 0;position: absolute;/* bottom: 6px !important; */}
    button.swiper-pagination-bullet {font-size: 14px !important; transition: .3s !important;}
    button.swiper-pagination-bullet.swiper-pagination-bullet-active:before {width: 26px; }
    button.swiper-pagination-bullet:before {left: 14px; top: 11px; transition: .3s !important;}
    button.swiper-pagination-bullet.swiper-pagination-bullet-active {width: 30px !important; }

    section.blogs button.swiper-pagination-bullet.swiper-pagination-bullet-active:before {width: 20px !important; }
    section.blogs button.swiper-pagination-bullet:before {left: 14px; top: 11px; transition: .3s !important;}
    section.blogs button.swiper-pagination-bullet.swiper-pagination-bullet-active {width: 20px !important; }
    section.blogs .pagination {/* bottom: 28px !important; */top: 36px;}
    .location_image_slider img {height: 380px !important; width: 100% !important; object-fit: cover; }
    section.testimonials .pagination {right: 0 !important; bottom: 22px !important;}
    .slider-inner .location_content,.img-slider-container {height: 500px; }
    .work_clm img {min-height: auto !important; }
    .expert_clm {width: 100%; }

    section.lets_start_togather {text-align: center; }
    section.lets_start_togather .fs_20px {font-size: 16px;}
    section.lets_start_togather .fs_149px {font-size: 7.2vw; }
    section.lets_start_togather .expert_clm {text-align: left; }

    section.client_video .fs_100px {font-size: 44px; text-align: center; }
    section.faqs .expert_clm {text-align: center; }
    .faq-btn-wrapper {justify-content: center; }
    footer {padding-top: 50px; }
    .timeline__row ul.slick-dots li button {padding: 0; }
    .timeline__row ul.slick-dots li {margin: 0; }
    .location_des_wrap {min-height: 127px;}
    header nav a {padding: 0px 0 !important; }
    section.testimonials .swiper-backface-hidden .swiper-slide {min-height: 350px !important;}
    .slick-dotted.slick-slider {margin-bottom: 0px; }
    section.locations .locations_btn {font-size: 28px !important;}
    section.locations .addressWrap .fs_16px {font-size: 15px !important; }
    .culture_slider:before, .culture_slider:after {display: none; }
    article.blog_single .fs_70px {font-size: 36px; }

    .lets_talk_form .fs_38px {font-size: 20px; }

    section.culture.for_about .fs_80px {font-size: 30px; } 
    section.culture.for_about .fs_30px {font-size: 16px; }

    .content_hover {opacity: 1 !important; bottom: 0 !important; }
    .content_hover a.simple_btn {background-color: #fff; color: #000; border: none; }

    section.talk_to_expert .lets_talk_btn {padding: 10px 20px; font-size: 15px; }
    .youtube_icon {width: 70px !important; }
    section.service_for_mobile .review_clm span {margin: 0 !important;}

    section.about_banner .fs_20px {text-align: center;font-size: 15px;}
    .solution_pin {padding-top: 40px;}
    section.services_sec .srvce .fs_70px {line-height: 40px !important;}
    .w_auto_btn {width: auto !important;padding: 10px 12px !important;justify-content: center;margin: auto;display: table;}
    section.tab_sec .items img {height: 220px !important; object-fit: cover; object-position: 0px 0px;}
    .our_work_slider .work_img_wrap img {aspect-ratio: 779 / 493 !important;}
    section.other__services h2 {text-align: center;}
    .cleint_img_mb {border-radius: 5px;}
    section#work .fs_48px {font-size: 26px;}
    .work_para_mobile {font-size: 13px;}
    section.industry .industry_slider img {height: 210px !important;object-fit: cover;}
    section.industry .industry_slider p {font-size: 14px;}
    section.results p {color: #000;font-size: 13px;}
    section.plan_design .benefits_stack .fs_30px {font-size: 27px;}
    section.spanshot .snapshot_img {height: 180px !important;object-fit: cover;}
}

@media(max-width: 575px) {
    section.solution_content .solution1.position-sticky .fs_40px {font-size: 26px !important;}

    .slider-inner .location_content,.img-slider-container {height: 450px; }
    section.tech_stack img.review_img {width: 100px !important; }
    a.fs_70px {line-height: 10vw !important; }
    .read-more-btn {margin: 20px auto 0; display: table;}
    footer .img_wrap {min-height: 70px;}
    section.culture .culture_slider .item img {height: 240px !important;object-fit: cover;}

}



@media(max-width: 480px) {
    .fs_172px {font-size: 35.848vw;}
    section.hero_banner .my__container {padding: 0px; }
    .fs_190px {font-size: 7.8vw; }
    .fs_48px {font-size: 5.5vw;}
    .fs_20px {font-size: 3.721vw; }
    .fs_24px {font-size: 6.977vw; }
    .other__services_slider .item {padding: 0 0px; }
    .fs_100px {font-size: 10.349vw;}
    .fs_40px {font-size: 6vw;}
    .fs_250px {font-size: 15.581vw; }

    .teams_img {height: 630px !important; transform: scale(1.5); top: 60px; }
    .fs_190px {font-size: 7.100vw; }
    .vid_wrap {height: 240px; }

    .service_heading .fs_100px {font-size: 10.349vw; }
    .profile .fs_20px {font-size: 16px !important; }
    .profile h6 {margin-bottom: 7px; font-size: 11px; }
    .awards_row.active .awards_img {height: 110px; width: 100%; }
    .fs_290px {font-size: 13.884vw; }
    .input {border: 1px solid rgba(205, 205, 205, 0.50) !important;/* background: #FAFAFA !important; */padding: 16px 20px;font-size: 12px;} 
    ::placeholder {font-size: 12px !important;}
    .lets_talk_form {padding: 0 0px; }
    .fs_38px {font-size: 5.405vw;}
    section.why_prox .shaddowTop {box-shadow: 0px -58px 80px 0px #f4f4f4; margin-top: 10px; }
    section.culture .fs_100px {font-size: 16.372vw; text-align: center; width: 100%; }
    .mfs_50px {font-size: 10.651vw; }
    .fs_30px {font-size: 6.651vw; }
    .timeline_clm {min-height: 450px; }
    section.testimonials .fs_100px {font-size: 16.5vw; }
    .testimonials_slider .slick-track {gap: 0; }
    .testimonials_slider .item .fs_24px {font-size: 13px;font-weight: 400;}

    .testimonials_slider .item .client_img {width: 70px !important;height: 70px !important;}
    .testimonials_slider .item .fs_20px {font-size: 3.791vw;}
    .testimonials_slider .item .txt__wrap span {font-size: 2.326vw; }
    .testimonials_slider .item .align-items-end {align-items: center !important; }
    .testimonials_slider .item {min-height: auto; }

    .btns_wrap .slick_testi_arrows button:nth-child(1) {right: unset !important; left: 0; }
    section.testimonials .btns_wrap .slick_testi_arrows button {padding: 15px 30px; }

    section.blogs .fs_100px {font-size: 16.674vw; }

    .blogs_slider .slick-list {padding-right: 0% !important; }
    section.blogs .blogs_slider .item {padding: 0 !important; }
    
    
    .accordion-button::after {width: 12px !important; height: 12px !important; position: relative; top: -9px; }
    .accordion-header button {padding: 20px; }

    section.locations .fs_80px {font-size: 9vw; }

    .fs_20px {font-size: 5.3vw;}

    .checkmark {padding: 8px 15px; font-size: 14px; }
    section.form__section button.themeBtn {width: 100% !important; } 
    .whts_icon {width: 30px; }

    footer form.newsletter button {padding: 0 30px; }

    footer .fs_38px {font-size: 5.100vw; }
    footer .border-top.mt-5.pt-5.mb-5.text-center {border-color: #ffffff21 !important; }
    .slider-inner .location_content,.img-slider-container {height: 400px; }

    section.faqs .fs_20px {font-size: 4.3vw; }
    section.tab_sec .mfs_12px {font-size: 13px;}
    section.who__we__are .fs_20px {font-size: 4.3vw; }
}


@media(max-width: 414px) {
    .slider-inner .location_content,.img-slider-container {height: 370px; }
    .fs_40px {font-size: 5.977vw; }
    .fs_100px {font-size: 14vw; }
    section.awards .fs_120px {font-size: 40px; }
}


/* ---------------------------------------------------------------------------
   How We Help slider bar - mobile
   On mobile .sliderBtns goes full width and pushes the two arrows to the edges.
   The blogs slider bar then lets Swiper centre its numbers between them; the
   How We Help bar could not, because .w-auto overrode the full width Swiper
   needs for that centring. Restoring it puts the numbers between the arrows,
   exactly like every other mobile slider on the site. Desktop is untouched.
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  section.how_we_help .industry-swiper-pagination.w-auto {
    width: 100% !important;
    text-align: center;
  }
}


/* ---------------------------------------------------------------------------
   Numbered slider dots - centring the rule
   Every numbered slider on the site marks the active figure with a short rule
   beside it. That rule was a ::before pinned at `left: 18px` and run 24px, so
   in a 41px dot it finished at 42px - hard against the next figure, with all
   the slack bunched between the numeral and the start of the rule. Worse, dots
   that kept slick-theme's 5px side padding (Home, the industries, the case
   studies) measured 43.5px of content in that 41px dot, and the rule ran over
   the next number by 2.5px.

   Laying the button out as a flex line puts the numeral and the rule in the
   flow with one gap between them, so the rule centres on the numeral whatever
   the digit's width and the space left in the dot becomes an even gap before
   the next figure. align-items does the vertical centring the fixed `top` only
   approximated. Zeroing the side padding is what makes the pair fit.

   The fixed dot width was the real fault. A dot was pinned to 41px (or 42, 40,
   27, 16, 100% - six different values across five sheets) while its content is
   a digit whose width varies, so the trailing gap shrank as the figure widened
   and vanished entirely on a two-digit number. Letting the dot size to its
   content and putting the spacing in a `gap` makes the distance between figures
   the same everywhere by construction, whatever the digit.

   This is now the ONLY place the geometry of these dots is set. The eight
   fragments that used to set it - four different `left` values and four rule
   widths, spread across reponsive.css, responsive-main-service.css and the two
   single-* sheets - have been removed; what stays in those sheets is the one
   thing that genuinely differs per band, the colour of the figures and the
   rule (white over a dark band, black over a light one).

   Deliberately not an enumerated list of sections: this numbering appears in a
   dozen bands, and one was always going to be missed - the team slider was,
   first time round. `:not(:has(img))` states the one thing that actually
   distinguishes these from the client-video band's image dots, which keep their
   own layout. This sheet loads after every page sheet, so one block reaches all
   of them.
--------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  ul.slick-dots:not(:has(img)) {gap: 8px; }
  ul.slick-dots li:not(:has(img)) {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0;
  }
  /* home.css sets `li.slick-active {width: 68px !important}` outside any media
     query - the desktop treatment, where the rule is 50px long. Both rules are
     !important, so specificity decides and that one is the more specific of the
     two; naming .slick-active here is what lets the phone width win without
     touching the desktop rule the service pages still use. */
  ul.slick-dots li.slick-active:not(:has(img)) {width: auto !important; }
  ul.slick-dots li button:not(:has(img)) {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    height: auto !important;
    padding: 0;
    line-height: normal;
  }
  /* The rule sits after the figure, vertically centred on it. */
  ul.slick-dots li button:not(:has(img)):before {
    content: "" !important;
    position: static !important;
    order: 2;
    flex: 0 0 20px;
    width: 20px !important;
    height: 1px !important;
    top: auto !important;
    left: auto !important;
    margin: 0;
    opacity: 1;
  }
  /* Only the active figure carries one. */
  ul.slick-dots li:not(.slick-active) button:not(:has(img)):before {display: none; }
}


/* ---------------------------------------------------------------------------
   Mobile services slider
   The same band appears twice on the site - the home page's services and a
   service page's sub-services - and below 992px both now show one card at a
   time instead of the vertical stack they used to be. The two templates carry
   identical structure, so the presentation is written once here rather than
   inline in each: neither page shares a page sheet with the other (home.css vs
   single-services.css), and this sheet is global and loads last.

   Everything is scoped to .services_mb_slider. `.service_for_mobile` and
   `.service_row` are shared with the service pages' older markup, so an
   unscoped rule would reach content this design never touched.

   The element classes are new for the same reason - the card image is
   `srvc_card_img`, not `service_img`, because responsive-single-service.css
   pins `.service_row .service_img` to a fixed 280px height on service pages.

   Numbered dots get their geometry and colour from elsewhere: the block above
   sizes them, and each page sheet paints them (home.css, and for service pages
   responsive-single-service.css). What is needed here is only the release from
   the full-width absolute layout they use when slick appends them to a slider
   itself - between two arrows they have to be an ordinary flex item.
--------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* !important because the section also carries Bootstrap py-0, which sets
     both vertical paddings with !important of its own - it came from the old
     stack, where every card supplied its own spacing. */
  .services_mb_slider {padding-bottom: 30px !important; }

  /* Until slick runs, only the first card should be on screen: the track is a
     plain stack of every card and would otherwise flash full height. */
  .services_mb_slider .srvc_track:not(.slick-initialized) > .service_row + .service_row {display: none; }

  /* The card: image fills it, the copy sits over the foot of the image. */
  .services_mb_slider .srvc_card {position: relative; display: block; overflow: hidden; border-radius: 10px; }
  .services_mb_slider .srvc_card_img {display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
  .services_mb_slider .srvc_card_body {position: absolute; inset: auto 0 0 0; padding: 24px 20px; z-index: 1; }
  /* The scrim. `.bg_overlay` is the theme's version of this but it lives in
     main-services.css, which neither of these two pages loads. */
  .services_mb_slider .srvc_card_body:before {content: ""; position: absolute; inset: -80px 0 0 0; background-image: linear-gradient(transparent, rgba(0, 0, 0, .85)); z-index: -1; pointer-events: none; }
  .services_mb_slider .srvc_card_body h2 {margin-bottom: 10px; }
  .services_mb_slider .srvc_card_body p {font-size: 14px; line-height: 1.5; }

  /* The two figures under the card. */
  .services_mb_slider .srvc_stats {margin-top: 28px; }
  .services_mb_slider .srvs_count {font-size: 40px; line-height: 1.1; }
  /* .srvs_txt is used in the markup on both pages but has never had a rule in
     any sheet, so without this the label falls back to the browser default. */
  .services_mb_slider .srvs_txt {font-size: 14px; line-height: 1.35; margin: 6px 0 0; }

  /* style.css gives `.slick-initialized button` the prev arrow as a centred
     background image. That selector is meant for slick own arrows but reaches
     every button inside a slider, and this one now is one - the chevron landed
     between the two words and read as "ReadMore". */
  .services_mb_slider .readMoreContentBtn {margin-top: 18px; font-size: 14px; background-image: none !important; }
  .services_mb_slider .readmoreContent {padding-top: 24px; }
  .services_mb_slider .readmoreContent .case_study {margin-bottom: 24px; }
  .services_mb_slider .readmoreContent .case_study img {border-radius: 10px; }
  .services_mb_slider .readmoreContent .review_clm {padding: 0; }

  /* Arrows at the two edges with the numbered position between them, the same
     control row the service panels and the benefits band use. */
  .services_mb_slider .srvc_nav {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
  .services_mb_slider .srvc_nav .slick-arrow {flex: 0 0 auto; }

  /* Slick appends its <ul> here. Left alone it is the absolute, full-width
     list it uses when it sits under a slider, and it cannot sit between two
     arrows; and its <li> keep the default flex-shrink, which squeezes the
     figures until they read as one number. */
  .services_mb_slider .srvc_dots {flex: 1 1 auto; display: flex; justify-content: center; }
  .services_mb_slider .srvc_dots ul.slick-dots {position: static; width: auto; margin: 0; bottom: auto; left: auto; right: auto; flex: 0 0 auto; flex-wrap: nowrap; justify-content: center; }
  .services_mb_slider .srvc_dots ul.slick-dots li {flex: 0 0 auto; }
  /* Colour is the one thing each band sets for itself, and this band is on
     black on both pages. home.css already paints these white, but a service
     page loads responsive-single-service.css instead, which paints them black
     for the light-ground sliders that page normally carries - black on black.
     Stated here so the band does not depend on which sheet the page loaded. */
  .services_mb_slider .srvc_dots ul.slick-dots li button {color: #ffffff54 !important; }
  .services_mb_slider .srvc_dots ul.slick-dots li.slick-active button {color: #fff !important; }
  .services_mb_slider .srvc_dots ul.slick-dots li button:before {background-color: #fff !important; }

  .services_mb_slider .srvc_cta {margin-top: 24px; }

  /* The call button is the pill and the circle side by side, not one white
     bar with the icon inside it. style.css flattens every .themeBtn span to
     `width: auto; padding: 0`, which collapses .arrow_circle from 59px to the
     15px of the icon and drops the pill's own padding, so both are restored
     here. Applies to the case-study button behind Read More as well. */
  .services_mb_slider .themeBtn {background-color: transparent !important; border-color: transparent !important; padding: 0 !important; gap: 10px !important; }
  .services_mb_slider .themeBtn .btnText {width: 100% !important; padding: 18px 16px !important; background-color: #fff; border-radius: 50px; }
  .services_mb_slider .themeBtn .arrow_circle {flex: 0 0 56px; width: 56px !important; height: 56px !important; background-color: #fff; border-radius: 50%; }
  .services_mb_slider .themeBtn .arrow_circle img {width: 18px; height: auto; }
  /* style.css inverts a .themeBtn on hover by clearing the wrapper background
     and turning the text white. The white is on the two children here, so that
     rule on its own leaves white text on a white pill - invert the children
     instead. Worth having on a phone: a tap leaves :hover asserted until the
     next touch in most mobile browsers. */
  .services_mb_slider .themeBtn:hover .btnText,
  .services_mb_slider .themeBtn:hover .arrow_circle {background-color: transparent; border: 1px solid #fff !important; }
  .services_mb_slider .themeBtn:hover .btnText {color: #fff !important; }
}