/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* NEW PAGES SEPT 2025 */
/* CASE STUDY Pages */
.case-study-hero-img {
  width: 100%;
  height: 100%;
}
.hero_body h1 {line-height: 100%; color: #003A5D; margin-bottom: 2.375rem; font-size: clamp(2rem, 3vw, 3.125rem);}
.hero_body h2 {text-transform: uppercase; font-size: clamp(1rem, 2vw, 1.5rem); line-height: 100%; color: #003A5D; font-weight:700;}
.hero_body p {font-size: clamp(1rem, 2vw, 1.5rem); line-height: normal;}
.approach {width:30%; padding: 0px 20px 0px 78px;}
.approach h2 {text-transform: uppercase; font-size: 24px; line-height: 100%; color: #003A5D; font-weight: 700;}
.approach-sq-wrap {width: 70%;}
.approach-side-labels {width: 6%; display: flex; align-items: center;}
.approach-side-labels p {writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; padding: 0;}
.approach-box-wrap {width: 30%; text-align: center;}
.approach-top-box {background-color: #BFDEE0; min-height: 238px;}
.approach-top-box h2 {font-size: 18px; line-height: 24px;}
.approach-bottom-box {background-color: #83B6CC; min-height: 115px;}
.mmcd-results h2 {text-transform: uppercase; font-size: 24px; line-height: 100%; color: #003A5D; font-weight: 700;}
.mmcd-stats {position: relative; min-height: 447px; background: url('https://20865021.fs1.hubspotusercontent-na1.net/hubfs/20865021/raw_assets/public/lacek-2023/images/case-study/MMCD_Stats.png') center center no-repeat; background-size: cover; max-width: 704px;}
.promo-open-rate, .annual-spend, .performance {font-size:82px; padding: 2rem; font-weight: 900;}
.promo-open-rate {position: absolute; top: 6%; left: 4%;}
.promo-open-rate-copy-wrap {position: absolute; top: 38%; left: 9.2%;}
.annual-spend {position: absolute; top: 38%; left: 36%;}
.annual-spend-copy-wrap {position: absolute; top: 70%; left: 35%;}
.top-copy {position: absolute; top: 8%; left: 64.3%;}
.top-copy p {text-align: center; font-size: 28px; line-height: 100%; text-transform: uppercase; font-weight: 700;}
.performance {position: absolute; top: 6%; left: 58.2%; font-size: 58px;}
.performance-copy-wrap {position: absolute; top: 32%; left: 59%;}
.promo-open-rate-copy-wrap p, .annual-spend-copy-wrap p {text-align: center; font-size: 28px; line-height: 100%; font-weight: 700;}
.performance-copy-wrap p {text-align: center; font-size: 19px; line-height: 100%;}
.number {border: 1px solid #bfdee0; border-radius: 50%; font-weight: 900; font-size: 20px; width: 30px; text-align: center; display: inline-flex; justify-content: center; margin: 0; padding; 0;}
.objective-copy1, .objective-copy2, .objective-copy3, .objective-copy4 {display: inline-flex;}
.objective-copy1::before, .objective-copy2::before, .objective-copy3::before, .objective-copy4::before {content:'1'; border: 1px solid #bfdee0; border-radius: 50%; font-weight: 900; font-size: 15px; width: 25px; display: inline-flex; justify-content: center;}
.objective-copy2::before{content:'2';}
.objective-copy3::before{content:'3';}
.objective-copy4::before{content:'4';}
.obj-copy { padding-left: 19px; display: inline-flex; max-width: 55%;}
.number-wrapper {width: 50%;}
.Objectives-Patttern-Bar {width: 250px; height: auto;}

  


  @media screen and (min-width: 992px) and (max-width: 1199px) {
    .approach {width:15%; padding: 0px;}
    .approach-sq-wrap {width: 85%;}
  }
@media screen and (max-width: 991px) {
  .approach {width:100%; padding: 0px;}
  .approach-side-labels {width: 100%; display: flex; align-items: center; justify-content: center;}
  .approach-side-labels p {writing-mode: lr; transform: none; margin: 0; padding: 0;}
  .approach-box-wrap, .approach-sq-wrap {width: 100%;}
  .approach-sq-wrap {padding: 0 10%;}
  .approach-top-box, .approach-bottom-box {min-height: auto;}
  .approach-bottom-box p {padding: 0; margin: 0;}
}
@media screen and (max-width: 767px) {
  .mmcd-stats {position: relative; min-height: 369px; background: url('https://20865021.fs1.hubspotusercontent-na1.net/hubfs/20865021/raw_assets/public/lacek-2023/images/case-study/MMCD_Stats.png') center center no-repeat; background-size: cover; max-width: 576px;}
  .promo-open-rate-copy-wrap p, .annual-spend-copy-wrap p {font-size: 22px;}
  .performance-copy-wrap p {font-size: 17px;}
  .promo-open-rate {top: 5%; left: 2%; font-size: 70px;}
  .annual-spend {top: 36%; left: 34%;  font-size: 70px;}
  .performance {font-size: 52px; top: 5%; left: 56.2%;}
  .top-copy {top: 7%; left: 63.3%;}
  .performance-copy-wrap {top: 32%; left: 58%;}
  
  }
@media screen and (max-width: 575px) {
  .mmcd-stats {position: relative; min-height: 205px; background: url('https://20865021.fs1.hubspotusercontent-na1.net/hubfs/20865021/raw_assets/public/lacek-2023/images/case-study/MMCD_Stats.png') center center no-repeat; background-size: cover; max-width: 320px;}
  .promo-open-rate-copy-wrap p {font-size: 16px;}
  .annual-spend-copy-wrap p {font-size: 12px;}
  .performance-copy-wrap p {font-size: 12px;}
  .promo-open-rate-copy-wrap {top: 35%; left: 7.2%;}
  .annual-spend-copy-wrap {top: 74%; left: 36%;}
  .promo-open-rate {top: -5%; left: -1%; font-size: 40px;}
  .annual-spend {top: 32%; left: 30%;  font-size: 40px;}
  .performance {font-size: 26px; top: -2%; left: 54%;}
  .top-copy {top: 8%; left: 64%;} 
  .top-copy p {font-size: 16px;}
  .performance-copy-wrap {top: 29%; left: 55.5%;}
  }

@property --num {
        syntax: "<integer>";
        initial-value: 0;
        inherits: false;
        }

        @property --num2 {
        syntax: "<integer>";
        initial-value: 0;
        inherits: false;
        }
        @property --num3 {
        syntax: "<integer>";
        initial-value: 0;
        inherits: false;
        }

        .promo-open-rate {
        animation: counter 5s ease-in-out forwards;
        counter-reset: num var(--num);
        }

        .annual-spend {
        animation: counter2 3s ease-in-out forwards;
        counter-reset: num2 var(--num2);
        }
        .performance {
        animation: counter3 7s ease-in-out forwards;
        counter-reset: num3 var(--num3);
        }

        .promo-open-rate::before {
        content: counter(num);
        }

        .promo-open-rate::after, .annual-spend::after, .performance::after {
         content: '%';
        }

        .annual-spend::before {
        content: counter(num2);
        }
        .performance::before {
        content: counter(num3);
        }

        @keyframes counter {
        from {
            --num: 0;
        }
        to {
            --num: 69;
        }
        }

        @keyframes counter2 {
        from {
            --num2: 0;
        }
        to {
            --num2: 33;
        }
        }
        @keyframes counter3 {
        from {
            --num3: 99;
        }
        to {
            --num3: 5;
        }
        }