.cartons-mobile-wrapper {display: none;}
.home-recycleable .wrapper-col{margin-left:0px;}
.container.home-section-1 img {width: 85%;}
.left-col img {max-width: 100%;}
.about-section-2 .right-col{padding-left: 110px;}
.our-product-section-2{margin-top: 0 !important;}
/* Wrapper controls position */
.about-img-mbl {position: absolute;top: 31px;right: -110px;width: 40.3333%;
  height: 120%;z-index: 10;}
.product-img1{position: absolute;
      top: 10%;
      left: 50%;
      width: 30%;
      height: 38vh;
      transform: translateX(-50%);
      z-index: 20;}
.product-img2{position: absolute;
      top: 40%;
      left: 50%;
      width: 40%;
      height: 50vh;
      transform: translateX(-50%);
      z-index: 20;}

      .img-height-class{height: 1200px;}

@media (max-width: 767px) {

  /* HERO SECTION */
  .home-body #startchange {
    background-image: url("../images/mtn-bg-1600x1711.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    height: 100vh;        /* THIS is the key */
    min-height: 100vh;
    padding-top: 70px;   /* navbar height */
    position: relative;
  }

   /*  #startchange .home-section-2 {
    position: relativ
    z-index: 2;
  }
*/

  .home-body {
  background-image: none !important;padding-top: 0;}

  main.container-fluid.padding-class{padding: 0px;margin-top: -8px;}

  .container.home-section-1 {padding-top: 75px;}
  .move-text-down {padding-top: 90px;}
  .container.home-section-3.second-bg{padding-top: 445px;}
  .second-bg::before{top: 645px;background-size: contain;}
  .home-pristine .wrapper-col {padding-top: 245px;}

.cartons-animation {
  display: none !important;
}

.cartons-mobile-wrapper {display: block!important;
  position: relative;z-index: 1;
  padding: 40px 0;
  background: url('../images/water-background.jpg') no-repeat center bottom;
  background-size: cover;width: 100%;
}

/*.cartons-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}*/

.cartons-mobile {
  position: relative;
  z-index: 2;
  pointer-events: none; /* Let clicks pass through the container... */
}

.carton-slide {
    display: none; /* Hidden by default */
    width: 100%;
    max-width: 300px;
    height: 400px;
    margin: 0 auto;pointer-events: auto;
}

.carton-slide.active {
    display: block !important; /* Forces visibility when active */
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border: none;
  font-size: 22px;
  padding: 10px 15px;
  cursor: pointer;
  
  /* CRITICAL FIXES */
  z-index: 9999 !important; /* Bring to very front */
  pointer-events: auto !important; /* Ensure they accept clicks */
  display: block !important; 
}

.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
}

.carousel-dots button.active {
  background: #000;
}


  .carton-slide {
  margin: 0 auto;display: none;
  width: 200px;
  height: 360px;
}

.about-img-mbl{right: -23px!important;}
.about-section-2 .left-col {
        padding-top: 130px;}

.product-img1{height: 12vh;}
.product-img2{height: 20vh;width: 20%;}
.img-height-class{height: 430px;}
.our-product-section-2{margin-top: 30px!important;}
.contact-section-1 .right-col{margin-top: 40px;}
.about-section-2 .right-col {padding-left: 15px;}
.hdr-font {font-size: 36px;}

}


@media only screen 
  and (min-width: 390px) 
  and (max-width: 430px) 
  and (orientation: portrait) {
        .container.home-section-3.second-bg {
        padding-top: 500px;}
  }