.brands .all_brands {
  position: relative;
  overflow-x: clip;
}

.brand_txt {
  padding: 15px 5px;
}

.brand_txt h3 {
  margin: 0;
}

.brands .swiper-button-next {
  top: 0 !important;
  left: 3px !important;
}

.brands .swiper-button-prev {
  top: 0 !important;
  left: 11px !important;
}

@media (max-width: 768px) {
  .brand_txt h3 {
    font-size: 24px !important;
  }
  .brand_txt {
    padding: 10px 24px !important;
  }
  .all_brands .col {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}
.component_title {
  text-align: start;
  flex: 1;
}
.btns-cat {
  display: flex;
  gap: 10px;
}


[dir="rtl"] .btns-cat {
  flex-direction: row;
}
[dir="ltr"] .btns-cat {
  flex-direction: row-reverse;
}

.btns-cat div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  background-color: #d9d9d966;
}
.btns-cat div:hover {
  background: #ddd;
}

.brand_card {
  border: 2px solid var(--border-theme-color);
  padding: 14px;
  text-align: center;
}
.brand_card h3 {
font-size: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
}
@media screen and (max-width: 768px) {
  .component_title h1 {
    font-size: 20px !important;
  }
  .component_description {
    font-size: 16px !important;
    width: 100% !important;
  }
}