@media (max-width: 575.98px) {
    .carousel-item h2{
        font-size: 17px;
        font-weight:bold;
    }
    .carousel-item {
        position: relative;
    }
  
}

@media (min-width: 576px) and (max-width: 767.98px){
    .carousel-item  h2{
        font-size: 17px;
        font-weight:bold;
    }
    .carousel-item {
        position: relative;
    }
}

@media(max-width: 767.98px){

.image-slider{
height:315px;
object-fit:contain;
}
.title-div-home{
    font-size:14px;
}
.carousel-item .title.title-center br{
display:none;
}
.carousel-item  {
    height: 350px;
}
.carousel-item .title.title-center {
left: 35%;
transform: translate(-30%, -50%);
text-align: center;
}
.carousel-item .title.title-left,
.carousel-item .title.title-right
{
left: 5%;
right:auto;
margin-left:-40px;
transform: translate(5%, -50%);
text-align: left;
}
html[dir='rtl'] .carousel-item .title.title-left,
html[dir='rtl'] .carousel-item .title.title-right
{
transform: translate(0%, -50%);
text-align: right;
margin:-20px;
left:auto;
}
.carousel-item .title.custom-left-slider
{
left: 40%;
right:auto;
transform: translate(0%, -50%);
text-align: left;
}
.product_details{
    min-height: auto !important;
}
.main_link h6{
    font-size: smaller;
}

html[dir='rtl'] .carousel-item .title.custom-left-slider
{
right: 40%;
left:auto;
transform: translate(0%, -50%);
text-align: right;
}
.carousel-item .title {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    max-width: 100%;
    z-index: 10;
    font-size: 20px;
}

.carousel-item:has(.title-left ,.tiltle-right,.custom-left-slider)  img {
  object-fit: unset !important;
}
.cart-image img{
    width:150px !important;
}
.cart-image h2{
    font-size:1rem !important;
}

}

@media (min-width: 768px) and (max-width: 991.98px){
    .carousel-item  h2{
        font-size: 34px;
    }
    .carousel-item{
        position: absolute;
    }
    
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .carousel-item  h2{
        font-size: 44px;
    }
    #carousel-item {
        position: absolute;
    }
}

@media (min-width: 1200px) {
    .carousel-item  h2{
        font-size: 54px;
    }
    #carousel-item {
        position: absolute;
    }
    .slick-prev{
      padding-left:20px !important;  

    } 
    .slick-next{
      padding-right:40px !important;  
    }
html[dir='rtl']    .slick-prev{
      padding-right:20px !important;  

    } 
 html[dir='rtl']   .slick-next{
      padding-left:40px !important;  
    }
}