.filter-wrapper {
  display: flex;
  align-items: self-end;
  gap: 20px;
  margin-top: 30px;
  padding: 10px 15px 15px 15px;
  border-radius: 15px;
}

.filter-category,
.filter-sort,
.search-box {
  height: 44px;
}

.filter-sort {
  width: 220px;
}

.filter-category {
  width: 205px;
}

.filter__categories-title,
.filter__sort-title {
  font-size: 16px;
  font-weight: 600;
}

.deals-title .text-title {
  font-size: 35px;
}

.deals-title p {
  font-size: 20px;
}

.category-title,
.sort-title {
  color: #717680;
  font-size: 15px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .deals-title .text-title {
    font-size: 33px;
  }

  .deals-title p {
    font-size: 18px;
  }
}

@media (max-width: 922px) {
  .filter-sort .filter-sort-ic {
    display: none;
  }

  .filter-sort {
    width: 100%;
  }

  .deals-title {
    text-align: center;
  }

  .deals-title .text-title {
    font-size: 30px;
  }
}

@media (max-width: 760px) {
  .deals-title .text-title {
    font-size: 28px;
  }

  .deals-title p {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .deals-title .text-title {
    font-size: 25px;
  }
}

@media (max-width: 820px) {
  .filter-wrapper {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }

  .filter-category,
  .filter-sort,
  .search-box {
    max-height: 44px;
  }

  .category-title,
  .sort-title {
    font-weight: 500;
  }

  .search-box {
    width: 100%;
    border-radius: 50px;
    padding: 8px 8px 8px 16px;
  }

  .search-container .search-box .btn-search {
    max-width: 30px;
  }

  #sort-by .sort-by-menu,
  #categories .categories-menu {
    top: 45px;
  }

  .filter-group {
    width: 100%;
    gap: 10px;
  }

  .filter__categories-title,
  .filter__sort-title {
    font-weight: 500;
  }

  .filter-sort,
  .filter-category {
    border-radius: 50px;
    width: 100%;
  }

  .categories-content,
  .sort-by-content {
    /* display: none; */
  }
}

@media (max-width: 450px) {
  #categories .categories-menu {
    width: fit-content;
  }
}

@media (max-width: 380px) {
  #sort-by .sort-by-menu {
    width: fit-content;
  }
}