:root {
  --mobile-s: 320px;
  --mobile-m: 375px;
  --mobile-l: 425px;
  --tablet: 768px;
  --laptop: 1024px;
  --laptop-l: 1440px;
  --desktop: 1920px;
  --desktop-l: 2560px;
}

@media only screen and (max-width: 450px) {
  .popular-products.items-list {
    margin-top: 20px;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .productbaseofctg {
    display: block;
  }

  .productbaseofctg .single-item {
    overflow: hidden;
    height: -webkit-fill-available;
  }

  .categorys {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
  }

  .categorys .list-items.category-slider {
    margin-top: 0px !important;
  }

  .list-items.category-slider .single-item {
    height: calc(560 / 1900 * 100%); /* Maintain 1900:560 ratio */
    overflow: hidden;
  }

  .categorys h3 {
    padding: 10px 0px;
  }

  .categorys .col-12.mb-6 {
    margin-bottom: 0px !important;
  }

  .productbaseofctg .col-md-4 {
    height: calc(560 / 1900 * 100%); /* Maintain 1900:560 ratio */
  }

  .single-product-viewpage button.btn-close {
    display: none;
  }

  .popular-products.items-list .single-items {
    height: fit-content !important;
  }
}

@media only screen and (min-width: 310px) {
  a.fieadWhat {
    bottom: 130px;
  }
  a.scroll-to-top-btn {
    bottom: 90px;
  }
  .hero-slider {
    height: calc(560 / 1900 * 39vh); /* Maintain 1900:560 ratio */
  }
}

@media only screen and (min-width: 370px) {
  .hero-slider {
    height: calc(560 / 1900 * 410px); /* Maintain 1900:560 ratio */
  }

  .hero-slider .slider img {
    /* object-fit: contain; */
  }

  .hero-slider .slick-dots {
    bottom: 0px;
  }
}

@media only screen and (min-width: 420px) {
  .hero-slider {
    height: auto;
  }
}

@media only screen and (min-width: 760px) {
  .hero-slider {
    height: auto;
  }
}

@media only screen and (min-width: 1020px) {
  .hero-slider {
    height: auto;
  }
}

@media only screen and (min-width: 1435px) {
  .hero-slider {
    height: calc(560 / 1900 * 170vh); /* Maintain 1900:560 ratio */
  }
}

@media only screen and (min-width: 1550px) {
  .hero-slider {
    height: calc(560 / 1900 * 203vh); /* Maintain 1900:560 ratio */
  }
}