@media(max-width:1920px){}
@media(max-width:1600px){}

@media(max-width:1537px) {}



@media(max-width:1490px) {
    section.single_service_banner .fs_40px {font-size: 1.9vw; }
    section.single_service_banner .fs_20px br {display: none; }
    section.tech_stack .slick-slider img.review_img {width: 150px !important;}
    section.results .fs_100px {font-size: 4.3vw; }
    .imageCross_slider {transform: rotate(-45deg) translate(50%, 20%);} 
    .nav-link .arrow_right {top: 20px; }
}


@media(max-width:1367px) {
    .content_wrapper {display: block; height: 130px; }
    
}

@media(max-width: 1280px) {
    .fs_27px {font-size: 20px;}
    /*RESULTS SECTOIONCSS*/
    .imageCross_slider {width: 27vw; gap: 14vw; }
    /*RESULTS SECTOIONCSS*/
    section.services .right-wrap .panel span {font-size: 13px; }
}

@media(max-width: 1200px) {
    .imageCross_slider {width: 29vw; gap: 16vw; }
}

@media(max-width: 1199px) {}

@media(max-width: 1110px) {
    
}

@media(max-width: 1024px) {}

@media(max-width: 992px) {
    section.client_video .sliderBtns button {bottom: 0 !important; } 
    section.client_video .sliderBtns {margin-bottom: 30px; }
    .slick-slider .slick-slide {padding: 0 10px; }
    section.results .results_slider .light {color: #000 !important; }
    .themeBtn {font-size: 13px; justify-content: center;}
    section.client_video .fs_20px {font-size: 13px; }
     ul.slick-dots {left: 0; bottom: 26px !important; right: 0; width: 100%; justify-content: center; }
    ul.slick-dots li button {color: #00000054;}
    .slick-dots li.slick-active button {color: #000000;}
    /* Colour only - reponsive.css sets the geometry of these dots once. */
    .slick-dots li button:before {background-color: #000000; }
    section.industry .pagination {bottom: 22px !important; }
    html body section.client_video .slick_dots_for_reviews ul li button:before {background-color: #000000 !important; top: 0px; }

}

@media(max-width: 768px) {
    section.tab_sec {padding-top: 50px !important; }
    section.tab_sec ul.slick-dots {margin-top: 60px !important; }
    section.results {background-color: #f5f5f5; } 
    section.results p {color: #000; } 
    section.results .results_txt_img {filter: brightness(0); margin-bottom: 20px; }
    .plan-design-cercle-box {width: 120vw; height: 120vw; }
    section.plan_design {height: auto !important;}
    section.industry .fs_50px {font-size: 7.6vw; }
    section.tech_stack .fs_100px {font-size: 12vw; }
    .slick__for {margin-bottom: 20px !important; }
    section.client_video .sliderBtns {margin-bottom: 0 !important;}
    .slider_pagi_arrow {display: inline-block; width: 100% !important; }
    .slider_pagi_arrow .sliderBtns {justify-content: space-between; }
    section.other__services .other-services-pagination {bottom: 22px; }
    section.faqs .fs_40px {font-size: 32px; }
    .faq-btn-wrapper {justify-content: center; }

    section.client_video .slick__for {margin-bottom: 20px !important; }
    section.client_video .fs_27px {font-size: 21px;}
    section.client_video .fs_20px {font-size: 14px;}
    section.client_video .sliderBtns button {bottom: 0 !important; }
    html body section.client_video .fs_48px {font-size: 25px !important; }
    section.client_video .fs_100px {color: #161616 !important; }

    /* The numbered dots used to be absolutely positioned over the arrow row
       from this box in the left column. Below 768px they are appended into
       .reviews_dots between the two arrows instead, so nothing lands here and
       the rules that placed them have gone with them. */

    section.single_service_banner .fs_40px {padding-left: 0% !important; }
    section.tab_sec {padding-bottom: 50px !important; }

    section.testimonials .testimonials_slider {margin-bottom: 23px; }
    section.other__services .btns_wrap {margin-top: 15px; }
}

@media(max-width: 575px) {
  section.results .results_clm .fs_30px {font-size: 4.651vw !important; }
}

@media(max-width: 480px) {
    section.single_service_banner .fs_20px {font-size: 16px;padding: 0;}
    section.single_service_banner .fs_40px {font-size: 21px !important; }
}

@media(max-width: 414px) {

    section.industry .fs_100px {font-size: 13vw; }
    .fs_100px {font-size: 13.6vw; }

}

/*HIEGHT MEDIA QUERY*/
@media(min-height: 768px) {
    section.section.plan_design {padding-top: 30px !important; padding-bottom: 30px !important; }
    .border-shape {height: 40px; }
    .arrow_down {right: 9%; width: 30px !important; }
    section.faqs .read-more-btn {margin: 0px auto 0 !important; }
    
    
}

/* ---------------------------------------------------------------------------
   Services stack - short desktop screens

   Each .panel is a full-viewport black card holding a heading, the expandable
   "Read More" block, two stats and two CTA buttons. It used height:100vh with
   Bootstrap's align-content-center, so once the expanded content grew past the
   viewport it was centred OUT of the box - clipped at the top and the bottom
   at once, with no way to scroll to it.

   The base rule now uses min-height, so the panel grows instead of clipping.
   These rules give short screens the extra room to avoid growing at all, and
   stop pinning the panel in the rare case where it still has to.
   --------------------------------------------------------------------------- */

/* Laptop screens with browser chrome and a bookmarks bar land here. Tightening
   the padding buys back ~40px, which keeps the content inside one viewport. */
@media (max-height: 760px) {
  section.services .right-wrap .panel { padding: 30px 50px; }
  section.services .right-wrap .panel .border-bottom {
    margin-bottom: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  section.services .right-wrap .panel .d-flex.gap-3.mt-4 { margin-top: 1rem !important; }
}

/* Very short windows: the content genuinely cannot fit one viewport. Let the
   panel grow and stop pinning it - a sticky panel taller than the screen would
   hide its own lower half with no way to reach it. */
@media (max-height: 620px) {
  section.services .right-wrap .panel {position: relative; padding: 26px 50px; }
  section.services .right-wrap .panel .fs_58px { font-size: 42px; }
  section.services .right-wrap .panel .fs_30px { font-size: 20px; }

}

/* Narrow desktop widths make the pill rows wrap onto more lines, which is the
   other way this panel outgrows its viewport. */
@media (max-width: 1200px) and (min-width: 992px) {
  section.services .right-wrap .panel { padding: 34px 34px; }
  section.services .left-stack .left { padding: 34px; }
}

/* ---------------------------------------------------------------------------
   Benefits stack (section.plan_design) - short desktop screens

   The section is locked to 100vh with overflow:hidden, and the cards sit on a
   87vw decorative circle, so the composition is sized by WIDTH while the box
   is sized by HEIGHT. On a short window the card runs past the bottom edge and
   overflow:hidden simply cuts it off - at 1366x551 the card ended 106px below
   the section.

   The existing height query only tightened spacing for screens 768px and
   TALLER, so short screens - the ones that need it - kept the roomy 100px
   padding and the 130px wrap offset. These rules give that space back.
   --------------------------------------------------------------------------- */
@media (max-height: 767.98px) and (min-width: 992px) {
  section.section.plan_design {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    /* if it still cannot fit, grow rather than cut. On taller screens the
       content is shorter than the viewport, so this stays exactly 100vh. */
    height: auto !important;
    min-height: 100vh;
  }
  /* 135px keeps the number bubble clear of the heading above it - at 40px the
     bubble sat 66px inside the heading. */
  section.plan_design .plan-design-main-wrap { margin-top: 135px; }
  section.plan_design .border-shape { height: 34px; }
  section.plan_design h2.fs_100px { font-size: 46px; }
  section.plan_design h3.fs_48px { font-size: 26px; }
  section.plan_design .plan-title { font-size: 22px; }
  section.plan_design .plan-details { font-size: 14px; }
}

/* Shorter still - trim the last of the vertical spacing. */
@media (max-height: 620px) and (min-width: 992px) {
  section.section.plan_design {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  section.plan_design .border-shape { height: 24px; }
  section.plan_design h2.fs_100px { font-size: 38px; }
  section.plan_design h3.fs_48px { font-size: 22px; }
  section.plan_design .plan-design-single-inner-card { margin-top: 10px; }

}

/* Mobile sub-services: the Read More button now sits at the end of the intro
   paragraph block, so the stacked py-5 gaps either side of it (48px + 48px)
   left far too much empty space before the stats. Halve both.
   Scoped to .has_readmore so only pages carrying the read-more markup are affected. */
@media (max-width: 991.98px) {
  .service_for_mobile.has_readmore .service_row > .my__container.py-5:not(.panel2) {
    padding-bottom: 24px !important;
  }
  .service_for_mobile.has_readmore .service_row > .my__container.panel2 {
    padding-top: 16px !important;
  }
}

@media (max-height: 551px) {
  section.services .right-wrap .panel span {font-size: 13px; }

}