@media (min-width: 300px) and (max-width: 500px) {

    /* Force 4 cards in one row */
    .product-category-item {
        padding: 8px !important;
        margin: 0 !important;
        text-align: center;
    }

    /* Reduce the column spacing */
    .row.g-3,
    .row.g-sm-6 {
        --bs-gutter-x: 6px !important;
        --bs-gutter-y: 6px !important;
    }

    /* Reduce icon size */
    .product-category-item .icon {
        width: 45px !important;
        height: 45px !important;
        margin-bottom: 4px !important;
    }

    /* Smaller title text */
    .product-category-item .title {
        font-size: 12px !important;
        margin: 3px !important;
        padding: 3px !important;
        line-height: 1.2;
    }

    /* Remove extra top margins on other breakpoints */
    .mt-xl-0, .mt-sm-6, .mt-4 {
        margin-top: 5px !important;
    }

    /* Optional: reduce container padding */
    .container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .section-space{
        padding: 10px;
        margin: 20px;
    }
    /* Make product image larger on mobile */
    .product-item .product-thumb img {
        width: 90% !important;
        height: auto !important;
        padding: 20px !important;   /* reduce padding so image appears bigger */
    }

    /* Center the image inside its container */
    .product-item .product-thumb a.d-block {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        /* margin-right:30px ; */
    }

    /* Remove unwanted spacing */
    .product-item .product-thumb {
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* Adjust title size */
    .product-item .product-info .title {
        font-size: 14px !important;
        /* text-align: center !important;*/
        padding-left: 10px;
    }
    .product-rating{
        padding-left: 10px;
    }
}

@media (min-width: 280px) and (max-width: 400px) {
    .product-category-item {
       padding: 20px !important;
       margin: 0 !important;
       text-align: center;
   }

   /* Reduce the column spacing */
   .row.g-3,
   .row.g-sm-6 {
       --bs-gutter-x: 6px !important;
       --bs-gutter-y: 6px !important;
   }

   /* Reduce icon size */
   .product-category-item .icon {
       width: 23px !important;
       height: 24px !important;
       margin-bottom: 4px !important;
   }

   /* Smaller title text */
   .product-category-item .title {
       font-size: 5px !important;
       margin: 3px !important;
       padding: 3px !important;
       line-height: 1.2;
   }

   /* Remove extra top margins on other breakpoints */
   .mt-xl-0, .mt-sm-6, .mt-4 {
       margin-top: 5px !important;
   }

   /* Optional: reduce container padding */
   .container {
       padding-left: 6px !important;
       padding-right: 6px !important;
   }
   .section-space{
       margin: 15px;
   }

}
.img1:hover{
    opacity: 0.7;
}

.image1{
    width: 570px;
    height: 678px;
}

/* left and right arrow */
.related-product-wrap {
    position: relative;
    width: 100%;
  }
  
  /* slider: horizontal scroll, don't hide images */
  .related-product-slide-container .swiper-wrapper {
    display: flex;
    gap: 15px;   
    margin: auto;               /* space between slides */
    overflow-x: auto;
    scroll-behavior: smooth;    /* smooth scrolling when buttons clicked */
    -webkit-overflow-scrolling: touch;
  }
  
  /* arrows styling (adjust colors/sizes as needed) */
  .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .slider-arrow.left { left:35px; }
  .slider-arrow.right { right:8px; }
  .slider-arrow.disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
  }
  
  .slider-arrow:focus { outline: 2px solid #fff; }
  
  /* optional: hide scrollbar on some browsers */
  .related-product-slide-container .swiper-wrapper::-webkit-scrollbar { height: 8px; }