/* Mobile: up to 480px */
@media (max-width: 480px) {
  .hero-slider-list {
    display: flex;
    flex-direction: column-reverse;
  }
  .hero-wrp {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    gap: 20px;
  }
  .hero-text {
    width: 100%;
  }
  .hero-text h1 {
    font-size: 35px;
    line-height: 1;
  }
  .h-btn-1, .h-btn-2 {
    width: 50%;
    font-size: 13px;
  }
  #d-search-bar input {
    width: 100%;
}
#filter-btn {  
    padding: 8px 30px;
}
#design-pack-banner h1 {  
    font-size: 24px;
    line-height: 1.02;
}
#design-pack-banner {
    padding: 20px 20px;
}
#design-pack-banner p{
    font-size: 12px;
}
.dtf-choose {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: space-between;
    flex-direction: column;
}
.dtf-packs {
    display: flex;
    width: 100%;
}
}

/* Small tablets: 481px to 768px */
@media (min-width: 481px) and (max-width: 768px) {
  .hero-slider-list {
    display: flex;
    flex-direction: column-reverse;
  }
  .hero-wrp {
    flex-direction: column-reverse;
    gap: 24px;
  }
  .hero-text {
    width: 100%;
  }
  .hero-text h1 {
    font-size: 45px;
  }
  .h-btn-1, .h-btn-2 {
    width: 60%;
    font-size: 15px;
  }
}

/* Tablets: 769px to 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-slider-list {
    display: flex;
    flex-direction: column;
  }
  .hero-wrp {
    flex-direction: column;
    gap: 28px;
  }
  .hero-text {
    width: 100%;
  }
  .hero-text h1 {
    font-size: 55px;
  }
  .h-btn-1, .h-btn-2 {
    width: 70%;
    font-size: 17px;
  }
}