.green-text{
  color: var(--base-color);
}
.max-width-85{
  max-width: 85% !important ;
}
.arrow-rotate{
  transform: rotate(180deg);
}
#Ecommerce{
  max-width: 2600px;
  margin: auto;
}
.single-line{
  display: -webkit-box;        
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;       
    overflow: hidden;            
    text-overflow: ellipsis;     
    width: 100%; 
}
.slider-active-img{
  width: 19px;
height: 19px;
}
.lap-display-none{
display: none;
}
.slider-navigation-style-01.product-left-arrow{
  background-color: var(--very-light-green) !important;
  cursor: auto;
  top: 50% !important;
  left: 0px !important;
  width: 30px !important;
  height: 30px !important;
  .fa-arrow-left::before{
      color: var(--base-color);
  }


}
.slider-navigation-style-01.product-right-arrow{
  background-color: var(--very-light-green) !important;
  cursor: auto;
  top: 50% !important;
  right: 0px !important;
  width: 30px !important;
  height: 30px !important;
  .fa-arrow-right::before{
    color: var(--base-color);
}
  
}
#Ecom-Product-dlt{
  padding: 100px 40px 0px 40px;
  a{
    color: inherit;
  }
    button{
        border: none;
    }
    .cus-button{
        border: none;
    }
    .hover-green:hover{
      color: var(--base-color);
    }
    .heading-div{
        background-color: var(--very-light-green);
        color: var(--base-color);
        padding: 10px 20px;
        font-size: 20px;
        font-weight: 500;
        text-transform: capitalize;
    }
    .subtitle-bold{
        font-size: 20px;
        line-height: 31.44px;
        font-weight: 500;
        color: black;
        text-transform: capitalize;
      }
      .description-font{
        font-size: 18px;
        line-height: 32px;
        color: #444444;
      }
    .rating-star-img{
      width: 18.5px;
      height: 18.5px;
    }
    .rating-star-img-active{
      width: 16px;
      height: 16px;
    }
    #Ecom-Pro-Crumb{
        padding: 20px 0px;
        display: flex;
        font-size:18px;
        justify-content: start;
        align-items: center;
    }
    .pro-dtl-diamond {
        width: 6px; 
        height: 6px; 
        background-color: var(--base-color); 
        transform: rotate(45deg); 
        margin: 10px; 
    }
    #Ecom-Pro-dtl-img{
      .swiper-pagination-bullets.swiper-pagination-horizontal{
bottom: -33px !important;
      }
      .Ecom-Pro-dtl-relative{
        
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .fav-div{
          position: absolute;
          top: 15px;
          right: 15px;
          padding: 15px;
          border-radius: 50%;
          background-color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          z-index: 1;
          img{
            height: 25px;
            width: 25px;
          }
        }
        .product-list{
          position: relative;
          cursor: pointer;

          .product-list-img-div{
            width: 62px;
            height: 62px;
            border: 1.77px solid #FFFFFF;
            padding: 7px;
            margin-bottom: 15px;
            background-color: var(--very-light-green);
          }
          .active{
            border: 1.77px solid var(--base-color)
          }
        }
     
        
        .main-img{
          background-color: var(--very-light-green);
            width: 100%; 
            transition: transform 0.3s ease;
            position: relative;
            cursor: zoom-in;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10%;
          
            img{
                width:100%
            }
        }
        .default-zoom-img {
          width: 100%; /* Make the image responsive */
        
      }
      .main-img:hover  .default-zoom-img{
       display: none;
      }
    
    }


    #Ecom-Pro-dtl-content{
        .main-div{
            border-bottom: 1px solid #DDDDDD;
         
          }
      #ecom-pro-h1{
        font-size: 42px ;
        line-height: 49px ;
        font-weight: 600 ;
        color: #2D2E2F ;
        margin: 0px;
        padding:15px 0px;
        text-transform: capitalize;
      }
      h3{
        margin-bottom: 0px;
        text-transform: capitalize;
      }
      .p-bold{
        font-size: 16px;
        line-height: 25.6px;
        font-weight: 600;
        margin-bottom: 0px;
      }
      .p-black-lgt{
        font-size: 16px;
        line-height: 23.84px;
        font-weight: 400;
        margin-bottom: 0px;
        color: black;
      }
    
      .subtitle-lgt{
        font-size: 20px;
        line-height: 33.54px;
        font-weight: 400;
      }
      .pr-14px{
        padding-right: 14px;
      }
      .offer-div{
        width: fit-content;
        background-color: var(--base-color); 
        text-align: center;
        line-height: 15.66px;
        font-size: 14px;
        color: white;
        padding: 8px ;
        text-transform: uppercase;
      }
      .rating{
        color: #2D2E2F;
      }
      .rating-review-div{
        font-size: 14px;
      }


      .active-price{
        color: var(--base-color);
        font-weight: 700;
      }
      .inactive-price{
        font-weight: 400;
      }
    .neg-div, .pos-div{
        background-color: var(--very-light-green);
        font-weight: 100;
        font-size: 34px;
      
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .pos-div{
      font-size: 27px !important;

  }
    .neg-div:hover, .pos-div:hover{
      background-color: var(--base-color);
      color: rgb(255, 255, 255);
    }

    .qty-input{
        height: 40px;
        width: 58px;
        border: 1px solid #CBCBCB;
        margin: 0px 20px;
        padding: 0px;
        text-align: center;
    }
    .secondary-btn-md{
        background-color: var(--very-light-green);
        font-weight: 500;
        color: var(--base-color);
    }
    .secondary-btn-md:hover{
     border: none;
    }
    }
    #Ecom-Pro-other-dtl{
        font-size: 18px;
        padding: 35px 0px !important;
    }
    #Ecom-Pro-desc-dtl{
      
       
        .pro-heading-dark{
            font-size: 28px;
            line-height: 36.15px;
            font-weight: 500;
            color: #444444;
        }
        .wdt-85Per{
            width: 85%;
        }
        .wdt-80Per{
            width: 80%;
        }
        .list-cnt{
            display: flex;
            justify-content: space-between;
            padding: 20px 0px;
            border-bottom: 1px solid #DDDDDD
        }
    
    }
    #Ecom-Pro-review-dtl{
        .rating-div{
            font-size: 16px;
        }
          .review-list-div{
            border-bottom: 1px solid #DDDDDD
          }
          .rating-prf-img{
            width: 100px; /* Responsive width */
            height: 100px; /* Fixed height */
            object-fit: cover; 
            border-radius: 50%;
          
          }
    }

}


#e-commerce-detail-ad{
  background-color: var(--very-light-green);
  height: 350px;
  position: relative;
  margin: 0px 10%
}

#Ecom-dlt-related-prod{
    background-color: var(--very-light-green);
    color:#2D2E2F;
    .Ecom-dlt-related-pad{
      padding: 0px 40px 0px 40px;
    }
      .heading-title{
            font-size: 30px;
            line-height: 41.7px;
            font-weight: 500;
     }
     .image-main-div{
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
        position: relative;
       
     }
     .absolute-img{
        position: absolute;
        top: 9px;
        right: 13px;
     }
     .subtitle-fnt{
        font-size: 19.92px;
        line-height: 29.89px;
        font-weight: 400;
        color: #2D2E2F !important;
     }
     .view-text{
      font-size: 17.38px !important;
      line-height: 27.8px;
      font-weight: 400;
   margin-right: 10px;
     }
}

.subtitle-bold{
    font-size: 20px;
    line-height: 31.44px;
    font-weight: 500;
    color: black;
  }


  .image-container {
    position: relative;
    overflow: hidden;
    width: 300px; /* Adjust as needed */
    height: 400px; /* Adjust as needed */
    cursor: none; /* Hide default cursor */
}

.main-image {
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
}
.image-container:hover  .main-image{
 display: none;
}

.zoomImg {
    position: absolute;
    top: 20px; /* Default position */
    right: 20px; /* Default position */
    opacity: 0; /* Initially hidden */
    border: none; /* Remove border */
    max-width: none; /* Prevent max width */
    pointer-events: none; /* Ignore pointer events */
    transition: opacity 0.2s; /* Smooth opacity transition */
}

.view-arrow{
  display: none;
}

@media (min-width: 1921px) {
    #Ecom-Pro-dtl-content{
        .main-div{
          width: 67%;
        }
        #ecom-pro-h1{
          font-size: 42px !important ;
     
        }
    
    }
    #Ecom-Pro-dtl-img{
      height: 100%;
      position: sticky;
      top: 30px;
    }
    .main-img{
      height: 700px;
    }


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

  #Ecom-Pro-dtl-content{
    .main-div{
      width: 84%;
    }
    .p-black-lgt{
      font-size: 15px;
      line-height: 18.84px;
  
    }
  }

  .heading-div{
    font-size: 18px !important;
  }

  #Ecom-Pro-dtl-img{
    height: 100%;
    position: sticky;
    top: 30px;
    .fav-div{
      padding: 10px !important;
      img{
        height: 19px !important;
        width: 19px !important;
      }
    }
  }
  .main-img{
    height: 550px;
  }
  .secondary-btn-md, .primary-btn-md{
    font-size: 14px !important;
    padding: 10px 50px 10px 50px !important;
}
  .description-font{
    font-size: 15px !important;
    line-height: 26px !important;
    padding-top: 9px !important;
  }
  .subtitle-bold{
    font-size: 17px !important;
    line-height:25px !important;
    font-weight: 500 !important;
  }
  #Ecom-Pro-dtl-content{
    .neg-div, .pos-div{
      height: 35px !important;
  }
  .qty-input{
      height: 35px !important;
  }
    }
  #Ecom-Pro-other-dtl{
    font-size: 16px !important;
    line-height: 25px;

  }
  #Ecom-dlt-related-prod{
    .heading-title{
          font-size: 26px;
          line-height: 33.7px;
          font-weight: 500;
   }}
   #ecom-pro-h1{
    font-size: 36px !important;
    line-height: 33.57px !important;
    font-weight: 500 !important;
   }
   #Ecom-Pro-Crumb{
    font-size: 16px !important;
   }
   .offer-div{
    font-size: 13px !important;
   }
   .subtitle-lgt{
    font-size: 16px !important;
    line-height: 17.54px !important;
   }

   .sm-wdt-39-28{
    width: 58px;
 
  }
  .sm-wdt-28-27{
    width: 46px;
   
  }
  .rating-prf-img{
    width: 60px !important; 
    height: 60px !important; 
  }
  #e-commerce-detail-ad{

    height: 240px !important;
  
  }

  #Ecom-Pro-desc-dtl{
      
       
    .pro-heading-dark{
        font-size: 23px !important;
        line-height: 30.15px !important;
  
    }
    .wdt-85Per{
        width: 85%;
    }
    .wdt-80Per{
        width: 80%;
    }
    .list-cnt{
        display: flex;
        justify-content: space-between;
        padding: 12px 0px !important;
        border-bottom: 1px solid #DDDDDD
    }
    p{
      line-height: 30px !important;
    }

}

}
@media (max-width: 1599px) {
  #Ecom-Pro-dtl-img{
    height: 100%;
    position: sticky;
    top: 30px;
  }
  .main-img{
    height: 500px;
  }
}
@media (max-width: 1280px) {
  #Ecom-Pro-dtl-content{
      .main-div{
        width: 90%;
      }
    }

    #Ecom-Pro-dtl-img{
      height: 100%;
      position: sticky;
      top: 30px;
    }
    .main-img{
      height: 440px;
    }
}
@media (max-width: 1050px) {

}

.lf-hearticon{
  border: 0;
  cursor: pointer;
 display: flex;
 background-color: transparent;
&:focus{
  outline:none;
}
svg{
  fill:transparent;
}
&.is-active{
  svg{
    fill:var(--base-color);
    animation: beat cubic-bezier(0.04, 0.4, 0.5, 0.95) 450ms forwards 1;
  }
}
}

@media (max-width: 767px) {
  .mbl-display-none{
    display: none !important;
}
.lap-display-none{
  display: block !important;
}

  .secondary-btn-md, .primary-btn-md{
    font-size: 14px !important;
    padding: 10px 20px 10px 20px !important;
}

.view-arrow{
  display: block !important;
  width: 36px;
  height: 36px;
}
.view-text-lap{
  display:none !important
}
  #Ecom-Pro-Crumb, .main-div,  #Ecom-Pro-other-dtl, .wdt-85Per, .wdt-80Per, #Ecom-Pro-review-dtl{
    margin-right: 15px !important;
    margin-left: 15px !important;
}
#Ecom-dlt-related-prod{
  padding: 15px !important;
  .Ecom-dlt-related-pad{
    padding: 0px ;
  }
}
#Ecom-Pro-dtl-img{
  margin-right: 15px !important;
  margin-left: 15px !important;
  width: 93%;
}

  #Ecom-Product-dlt{
    padding: 77px 0px 0px 0px;


  }
  .description-font{
    font-size: 16px !important;
    line-height: 30px !important;
  }
.sm-padding-3px{
  padding: 0px 3px !important;
}
.sm-padding-8px{
  padding: 0px 8px !important;
}
  #Ecom-Pro-dtl-img{
    height: 100%;
  }
  .main-img{
    height: 400px;
  }


  #Ecom-Pro-dtl-content{
   #ecom-pro-h1{
    font-size: 26px !important;
    line-height: 33.57px !important;
    font-weight: 500 !important;
  }
.sm-px-11-28{
  padding: 5px 20px !important;
}

.subtitle-bold{
  font-size: 16px !important;
  line-height: 31.44px !important;
  font-weight: 400 !important;
}
}

.p-black-lgt{
  font-size: 14px !important;
  line-height: 18.27px !important;
  font-weight: 400;
}

#Ecom-Pro-other-dtl{
  font-size: 14px;
  line-height: 29.34px;
}
.subtitle-lgt{
  font-size: 12px !important;
  line-height: 13.05px !important;
  font-weight: 400 !important;
}
.sm-wdt-39-28{
  width: 31px;
  height: 28px;
}
.sm-wdt-28-27{
  width: 25px;
  height: 27px;
}
.pr-14px{
  padding-right: 4px !important;
}
#Ecom-Pro-other-dtl{
  font-size: 14px !important;
}
.wdt-85Per{
  width: 90% !important;
}
.wdt-80Per{
  width: 90% !important;
}
.rating-prf-img{
  width: 50px !important; 
  height: 50px !important; 
}
#e-commerce-detail-ad{
  height: 100px !important;
}

#Ecom-dlt-related-prod{
    .heading-title{
          font-size: 26px;
          line-height: 33.7px;
          font-weight: 400;
   }}

   .fav-div{

    padding: 10px !important;
    img{
      height: 18px !important;
      width: 18px !important;
    }
  }

}
@media (max-width:992px){
  #Ecom-Pro-dtl-img{
    position: static !important;
  }
}
/* for button */

  .cus-button {
  cursor: pointer;
  text-transform: uppercase;
  padding: 8px 40px !important;
  position: relative;
  color: white;
  z-index: 1;
  transition: all 0.5s ease-in-out;
  border-radius: 5px;
  font-size: 20px !important;
}
.cus-button:focus {
  outline: none;
}


/* primary button  */
.btn-cus-dark {
  background:var(--base-color);
  border: solid var(--base-color) 1px !important;
  width: 100%;
}
.btn-cus-dark.focus, .btn-cus-dark:focus{
  box-shadow: none;
}
.btn-cus-dark:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 50%;
  background-color: white;
  transition: all 0.5s ease-in-out;
  z-index: -1;
  border-bottom-left-radius:4.5px;
  border-bottom-right-radius:4.5px
}
.btn-cus-dark:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0%;
  height: 50%;
  background-color: white;
  transition: all 0.5s ease-in-out;
  z-index: -1;
  border-top-left-radius:4.5px;
  border-top-right-radius:4.5px
}
.btn-cus-dark:hover {
  color: var(--base-color);
  border-color: white;
  border: solid var(--base-color) 1px !important;
}
.btn-cus-dark:hover:before,
.btn-cus-dark:hover:after {
  width: 100%;
}

/* Button Animation on Click (active state) */
.btn-cus-dark:active {
  color: white;
  border-color: var(--base-color);
  background-color: var(--base-color);
  box-shadow: none;
  /* transform: scale(0.98);  */
}

.btn-cus-dark:active:before,
.btn-cus-dark:active:after {
  background-color: var(--base-color);
  transform: scaleY(0.9); /* Slight scale effect for the pseudo-elements */
}

/* secondary button  */
.btn-lite {
  background:var(--very-light-green);
  color: var(--base-color);
  border: solid var(--very-light-green) 1px !important;
  width: 100%;
}
.btn-lite:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 50%;
  background-color: white;
  transition: all 0.5s ease-in-out;
  z-index: -1;
  border-bottom-left-radius:4.5px;
  border-bottom-right-radius:4.5px
}
.btn-lite:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0%;
  height: 50%;
  background-color: white;
  transition: all 0.5s ease-in-out;
  z-index: -1;
  border-top-left-radius:4.5px;
  border-top-right-radius:4.5px
}
.btn-lite:hover {
  color: var(--base-color);
  border: solid var(--base-color) 1px !important;
}
.btn-lite:hover:before,
.btn-lite:hover:after {
  width: 100%;
}
.btn-lite:active {
  color: var(--base-color);
  border-color: var(--very-light-green);
  background-color: var(--very-light-green);
  box-shadow: none;
}
.btn-lite:active:before,
.btn-lite:active:after {
  background-color: var(--very-light-green);
}

/* extra lite button  */
.btn-extralite {
  background:white;
  color: var(--base-color);
  border: solid white 1px !important;
  width: 100%;
}
.btn-extralite:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 50%;
  background-color: var(--very-light-green);
  transition: all 0.5s ease-in-out;
  z-index: -1;
  border-bottom-left-radius:4.5px;
  border-bottom-right-radius:4.5px
}
.btn-extralite:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0%;
  height: 50%;
  background-color:  var(--very-light-green);
  transition: all 0.5s ease-in-out;
  z-index: -1;
  border-top-left-radius:4.5px;
  border-top-right-radius:4.5px
}
.btn-extralite:hover {
  color: var(--base-color);
  border: solid var(--base-color) 1px !important;
}
.btn-extralite:hover:before,
.btn-extralite:hover:after {
  width: 100%;
}
.btn-extralite:active {
  color: var(--base-color);
  border-color: var(--base-color);
  background-color: var(--base-color);
  box-shadow: none;
}
.btn-extralite:active:before,
.btn-extralite:active:after {
  background-color: var(--base-color);
}
@media (max-width: 1920px) {
  .cus-button {
    font-size: 18px !important;
  }
}
@media(max-width:1610px){
  .lre-margin1{
    margin:30px 0px !important;
  }
}
@media (max-width: 1599px) {
  .cus-button {
    font-size: 16px !important;
  }
}
@media (max-width: 1280px) {
  .cus-button {
    font-size: 14px;
    padding: 5px 20px !important;
  }
}
.cart-button{
  min-width: 180px;
}

.rw_img_div {
  background: #2f7557;
  padding: 14px 18px;
  color: #fff;
}
.lre-row1{
  align-items:center;
}
.lre-pad7{
  padding-bottom:10% !important;
}

@media(max-width:576px){
  #Ecom-dlt-related-prod {
    .image-main-div {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
        position: relative;
        height:230px !important;
        width:100% !important;
        overflow:hidden;

    }
    .image-main-div  img{
      width:100% !important;
      height:100% !important;
      object-fit:contain ;
    }
}
}