
.statsScroll-section{padding: 40px 0 100px 0;}
.statsScroll-section .statsScroll-container{padding-left: 0;}

.statsScroll-section .container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
  }

.statsScroll-section  .row {
    display: flex;
    flex-wrap: wrap;
  }
.statsScroll-section  .cc-statsScroll-row {
justify-content: center;
align-items: center;
}
.statsScroll-section  .col {
    flex: 1 1 100%;
  }

  .contentScroll {
    height: 500px;
    overflow: hidden;
    position: relative;
    background: #fff;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
    margin-top: 50px;
  }

  .contentfirst, .contentsecond, .slotPackaging-content1, .slotPackaging-content2 {
    transition: transform 1.5s ease;
  }

  .contentfirst {
    transform: translateY(0px);
  }

  .contentsecond {
    transform: translateY(600px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
.cp-statsScroll .contentsecond h4{
  font-size: 48px;
}
.cp-statsScroll .contentScroll{
  margin-top: 150px;
}
.cc-statsScroll .contentScroll{
  margin-top: 0;
}
  /* active animation */
  .contentScroll.active .contentfirst {
    transform: translateY(-600px);
  }

  .contentScroll.active .contentsecond {
    transform: translateY(110px);
  }
  
  .sticky-desktop-img .desktop-background {
    position: relative; 
    z-index: 1;
  }
  .sticky-desktop-img{
    position: relative;
    padding-right: 0px !important;
  }
  .cc-statsScroll-row .sticky-desktop-img .desktop-background{
    width: 85%;
  }
  .cc-testimonial-img img {
    position: absolute;
    top: -47px;
    right: 6px;
    z-index: 2;
    height: 160px !important;
    width: auto !important;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  
  .cc-testimonial-img .active {
    opacity: 1;
    /* Optional: if you also want to add a little transform animation */
    transform: scale(1.05);
  }

  .slotPackaging-content {
    height: 400px;
    overflow: hidden;
    position: relative;
    background: #fff;
    margin-top: 50px;
  }

  .slotPackaging-content1 {
    transform: translateY(0px);
  }

  .slotPackaging-content2 {
    transform: translateY(600px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  /* active animation */
  .slotPackaging-content.active .slotPackaging-content1 {
    transform: translateY(-500px);
  }

  .slotPackaging-content.active .slotPackaging-content2 {
    transform: translateY(0px);
  }
  
      .contentsecond h5 {
        color: #666666;
        font-weight: 400;
    }


/* compliance packaging */
.cp-testimonial-img img{
  top: 23px;
  height: 175px !important;
}
.mobile-bg-img{display: none;}
.cp-banner-content h5{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media screen and (max-width:1800px){
    .contentScroll.active .contentsecond {
    transform: translateY(40px);
}
}
  @media screen and (max-width:1600px) {
    .cc-testimonial-img img{top: -30px; height: 104px !important;}
    .contentScroll.active .contentsecond {
      transform: translateY(35px);}
    .cc-statsScroll-row .sticky-desktop-img .desktop-background { width: 78%;}
    .cp-statsScroll .contentScroll.active .contentsecond {transform: translateY(150px);}
    .cc-statsScroll .contentScroll.active .contentsecond {transform: translateY(80px);}
    .contentsecond h4{font-size: 32px;}
    .contentsecond h5{font-size: 28px;}
    .contentScroll {height: 350px;}
    .cp-statsScroll .contentScroll {height: 440px;}
    .slotPackaging-content {height: 460px;}
    .doorstep-content{width: 62%;}
    .cp-statsScroll .contentsecond h4 {font-size: 32px;}
    .cp-testimonial-img img{top: 17px; height: 140px !important;}
    .cp-statsScroll .contentScroll {margin-top: 40px;}
    .cp-statsScroll h2{padding-bottom: 0;}    
  }
  @media (min-width: 1400px) and (max-width: 1599px){
    .contentsecond{width: 85%;}
}
  @media screen and (max-width:1440px){
    .slotPackaging-content {height: 400px;}
  }
  @media screen and (max-width:991px) {
    .statsScroll-section {padding: 100px 0 100px 0;}
    .contentsecond h4 {font-size: 24px;}
    .contentScroll{margin-top: 0;}
    .What-makes-us-section .heading-h2 {
      font-size: 36px;
      padding-bottom: 0px;
      margin-bottom: 0;
  }
  .cp-doorstep-section .doorstep-content{width: 100%;}
  .stats-overview h2{padding-bottom: 0 !important;
  margin-bottom: 10px;
  }
  .profile-content{padding-right: 60px;}
  }
  @media screen and (max-width: 767px) {
    .cp-banner-content h5{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
    .safe-n-secure{padding: 40px 0;}
    .cp-highlight{line-height: 1.9;}
    .cp-footer-text{padding: 0 20px 40px 20px;}
    .cp-footer-text h6{padding: 0 20px; font-size: 18px;}
    .cp-button{padding: 0 20px;}
    .doorstep-section .container-fluid, .doorstep-wrapper, .doorstep-content{
      padding-right: 0;
      padding-left: 0;
      margin-right: 0;
      margin-left: 0;
    }
    .doorstep-content .desktop-content-box{
      display: none;
    }
    .mobile-bg-img{
      display: block;
      background-image: url('https://dosepacker.com/wp-content/uploads/2025/06/delivery.jpg');
      height: 100vh;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      position: relative;
      padding: 0 20px;
    }
    .mobile-bg-img h2{
      position: absolute;
      bottom: 0px;
    }
    .contentsecond h5 {font-size: 20px; color:#666666;
        font-weight: 400;
    }
    .contentsecond h4 {font-size: 22px; line-height: 1.4;}
    .cp-statsScroll .contentsecond h4{font-size: 22px;}
    .contentScroll{margin-top: 0;}
    .cp-statsScroll .contentScroll{margin-top: 0px; height: 350px;}
    .contentScroll.active .contentsecond {transform: translateY(15px);}
    .cp-statsScroll .contentScroll.active .contentsecond {
        transform: translateY(30px);
    }

    .statsScroll-section .container{padding: 0 20px;}
    .sticky-desktop-img .mobile-background{
      position: relative;
      width: 70%;
      display: flex;
      margin: 0 auto;
    }
    .cp-statsScroll .sticky-desktop-img .mobile-background{
      margin-bottom: 30px;
    }
    .cc-testimonial-img img {
      top: -28px;
      height: 60px !important;
      right: 70px;
  }
  .cp-testimonial-img img{
    top: -25px;
    height: 110px !important;
    right: 102px;
  }
  .statsScroll-section {
    padding: 0;
}
.What-makes-us-section .heading-h2{font-size: 24px;}
.doorstep-content {width: 100%;}
.cp-stats-overview.stats-overview .card h2 {
        font-size: 35px;
    }
  }
  @media screen and (max-width: 567px){
    /*.cp-banner .cp-banner-container{padding-left: 0; padding-right: 0;}*/
        .cp-statsScroll .contentScroll {
        margin-top: 0px;
        height: 400px;
    }
    
  }
  @media screen and (max-width: 500px){
    .cp-banner .buttonGroup .button-darkLink {
    color: var(--btn-color);
    padding: 5px 0;
}
/* .cp-banner .buttonGroup{padding-top: 10px;} */
    .stats-overview .card h2 {
      font-size: 32px;
  }
  .stats-overview .card .card-text{
    font-size: 18px;
  }
  .contentScroll {
    height: 375px;
  }
  .sticky-desktop-img .mobile-background{
    margin-bottom: 30px;
  }
  .cc-testimonial-img img {
    top: -10px;
    height: 55px !important;
    right: 66px;
  }
  .cp-testimonial-img img {
        top: -25px;
        height: 90px !important;
        right: 60px;
  }
  .cc-p{font-size:18px;}
  .resident-profiles .card-text{font-size:18px;}
  .mobile-bg-img{height: 80vh;}
  }

.mobile-feature-section{padding-bottom: 90px;}

@media screen and (max-width: 500px){

  .stats-overview .card h2 {

    font-size: 32px;

}

.stats-overview .card .card-text{

  font-size: 18px;

}

.contentScroll {

  height: 375px;

}

.sticky-desktop-img .mobile-background{

  margin-bottom: 30px;

}

.cc-testimonial-img img {

  top: -10px;

  height: 55px !important;

  right: 66px;

}

.cc-p{font-size:18px;}

.resident-profiles .card-text{font-size:18px;}

}