html body header {background-color: #181818;border-color: #4c4c4c !important;}
header a,header button {color: #fff; font-weight: 400 !important; }
header a img.logo {filter: brightness(0)invert(1); }
.hamBurger .btn_lines div {background-color: var(--white) !important; }
.banner_cotent {height: 760px; padding-bottom: 50px; }
.banner_cotent .themeBtn.bg-white:hover {background-color: #000 !important; border-color: #000 !important; } 
.banner_cotent .themeBtn.bg-black:hover {background-color: #fff !important; border-color: #fff !important; }
section.case_studies {display: none !important;}

.slider_pagi_arrow {display: flex;gap: 20px;align-items: center;}
section.industry .industry-swiper-pagination {filter: brightness(0); }

/************ECOMMERCE - REAL PROBLEM SECTION CSS*/
section.real_pri .problem_card { transition: .5s; }
section.real_pri .problem_card:hover {background-color: #fff; border-color: #EAEAEA; box-shadow: 0 20px 45px rgb(0 0 0 / 6%); }

section.real_pri .problem_card .icon_wrap img {width: 100%; height: 100%; object-fit: contain; }
section.real_pr .count_num {right: 30px; }
/************ECOMMERCE - REAL PROBLEM SECTION CSS*/

/************ECOMMERCE - LOSING MONEY CTA CSS*/
section.losing_money {min-height: 700px; }
/*section.losing_money:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, rgb(0 0 0 / 85%) 0%, rgb(0 0 0 / 55%) 45%, rgb(0 0 0 / 10%) 100%); z-index: 1; }*/
section.losing_money .themeBtn.bg-white:hover {background-color: #000 !important; border-color: #000 !important; }
/************ECOMMERCE - LOSING MONEY CTA CSS*/


/************ECOMMERCE - WHAT ACTUALLY MOVES CSS*/
section.what_moves .slick-track {display: flex; }
section.solution_content .content {padding-right: 40%; }
/************ECOMMERCE - WHAT ACTUALLY MOVES CSS*/

/************ECOMMERCE - HOW WE HELP CSS*/
section.how_we_help .help_card {transition: .5s; }
section.how_we_help .help_card:hover {transform: translateY(-8px); box-shadow: 0 20px 45px rgb(0 0 0 / 8%); }
section.how_we_help .help_img {height: 300px; background-color: #E4E4E4; background-repeat: no-repeat; background-size: cover; background-position: center; }
section.how_we_help .help_stat {border-top: 1px solid #EAEAEA; }
section.how_we_help .help_pill {width: 45px; height: 45px; background-color: #000; transition: .5s; }
section.how_we_help .help_pill:hover {background-color: #333; }
section.how_we_help .help_pill img {width: 14px; height: 14px; object-fit: contain; }

/* Slider numbers for the How We Help slider. The bullets default to white for
   the dark sliders elsewhere on the site, and this section sits on white, so
   they were invisible here. Same three rules the case study pages already use. */
section.how_we_help button.swiper-pagination-bullet {color: #000000 !important; }
section.how_we_help button.swiper-pagination-bullet.swiper-pagination-bullet-active {color: #000000 !important; }
section.how_we_help button.swiper-pagination-bullet:before {background-color: #000000 !important; }
/************ECOMMERCE - HOW WE HELP CSS*/

/************ECOMMERCE - IN THEIR OWN WORDS CSS*/
section.own_words .messages_slider .swiper-slide {height: auto; display: grid; align-content: space-between; }
section.own_words .message_shot {min-height: 520px; background-color: #F1F1F1; background-repeat: no-repeat; background-size: cover; background-position: top center; }
section.own_words .message_logo {max-height: 34px; object-fit: contain; }
/************ECOMMERCE - IN THEIR OWN WORDS CSS*/


section.own_words .swiper-slide {filter: blur(5px); transition: .5s !important; transform: scale(0.9); }
section.own_words .swiper-slide .caption {opacity: 0; transition: .5s !important}

section.own_words .current-slide {filter: blur(0px) !important; transform: scale(1) !important; } 
section.own_words .current-slide .caption {opacity: 1; }


.content_hover {position: absolute;bottom: -20px;left: 0;padding: 25px;height: 100%;display: flex;align-items: end;background-image: linear-gradient(transparent, transparent, #0000008c);opacity: 0;transition: .5s;}

.work_clm:hover .content_hover {opacity: 1; bottom: 0px; }
.work_clm:hover img {transform: scale(1.1); }




@media(max-width: 768px) {
    .banner_cotent {height: auto; padding-bottom: 50px; background-position: center; padding-top: 50px; }
    section.milestones .fs_20px {font-size: 13px; }
    section.milestones .col-6 .delivery_clm {padding: 0; background-color: #f7f7f7; width: 100%; padding: 20px; border-radius: 10px; height: 100%; }
    section.milestones .col-6 {border: none !important; }
    .fs_50px {font-size: 40px; }
    section.hero_banner .fs_70px {font-size: 30px !important; }
    section.hero_banner .my__container {padding: 0px 20px !important; }
    section.spanshot .fs_24px {font-size: 16px; }
    section.spanshot .row.bg-white.py-3.rounded-4 {text-align: center; }
    section.spanshot .row.bg-white.py-3.rounded-4 {text-align: center; } 
    section.spanshot .col-md-4 {margin-bottom: 20px;} 
    section.spanshot .col-md-4:last-child {margin-bottom: 0; } 
    section.spanshot .col-md-4 h4 {margin: 0 0 5px; }
    section.own_words .messages-swiper-pagination {justify-content: center !important; width: 100% !important; bottom: 22px; }
    section.own_words .d-flex.justify-content-between.position-relative {width: 100% !important; }
    section.losing_money .fs_70px {font-size: 30px; }
    section.losing_money .fs_24px {font-size: 15px; }
    section.solution_content .content {padding-right: 0; }
    section.solution_content .fs_20px {font-size: 15px; }
    section.solution_content span.fs_20px {margin-bottom: 20px; }
    section.how_we_help .fs_100px {font-size: 11.449vw; }
    section.how_we_help .fs_14px {font-size: 12px; }
    section.how_we_help .swiper-slide.item span.dark.uppercase {font-size: 11px; }
    section.how_we_help .swiper-slide.item .fs_40px {font-size: 22px; margin: 0;}
    section.how_we_help .swiper-slide.item .fs_40px br{display: inline-block !important;}
    section.industry .industry-swiper-pagination {bottom: 20px; }
    html body section.solution_content .solution1 .vh-100, html body section.solution_content .solution1 .h-100 {height: auto !important; }
    html body section.solution_content .solution1.position-sticky.top-0.vh-100, html body section.solution_content .solution1 .h-100 {height: auto !important; }
    html body section.solution_content .solution1 {height: auto !important; }
    section.solution_content .col-lg-6.d-grid.align-content-between.p-lg-5.p-4.vh-100 {padding-top: 0vh !important; padding-bottom: 5vh !important; }
    section.solution_content .solution1:first-child .col-lg-6.d-grid.align-content-between.p-lg-5.p-4.vh-100 {padding-top: 5vh !important; }
    section.solution_content .solution1.position-sticky {position: relative !important;}

    section.losing_money:before {content: ""; width: 100%; height: 100%; position: absolute; inset: 0; background-image: linear-gradient(transparent, black); }



}
section.industry.bg-white button.swiper-pagination-bullet {color: #000000 !important; }
section.industry.bg-white button.swiper-pagination-bullet.swiper-pagination-bullet-active {color: #000000 !important; }
section.industry.bg-white button.swiper-pagination-bullet:before {background-color: #000000 !important; }

/* The heading artwork is lazy loaded and its height attribute is "auto", so
   the heading measured short until the file arrived and then jumped taller,
   taking every pinned row with it. All four of these files are 2906x154, so
   holding the ratio reserves the right space from first paint. */
section.what_moves img[src$="what-moves.svg"] {aspect-ratio: 2906 / 154; }
