.brands-container{
  display: flex;
  position: relative;
  align-items: center;
  flex-wrap: wrap;
}
.brands-logos-container{
  display: flex;
  position: relative;
  align-items: center;
  gap: 4%;
  padding-inline: 3%;
  flex-wrap: wrap;
}
.brands-bg-2{
  position: absolute;
  z-index: -2;
  width: 100%;
}
.brands-bg-2 img{
  width: 100%;
  height: 100%;
}
.brands-hero-content{
  height: 60vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.brands-hero-container{
  background-image: url(/assets/img/flare.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.brands-hero-content h1{
  font-size: 3rem;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
}
.brands-hero-content p{
  font-size: 1rem;
  margin-top: 1vw;
  color: white;
  font-weight: 300;
  text-align: center;
}
.brands-hero-blur-1{
  position: absolute;
  width: 50%;
  left: 0;
  height: 60vh;
  top: 0;
  margin: auto;
  z-index: -1;
}

.brands-hero-blur-2{
  position: absolute;
  width: 50%;
  height: 60vh;
  right: 0;
  top: 0;
  margin: auto;
  z-index: -1;
}
.brands-hero-blur-1 img, .brands-hero-blur-2 img{
  width: 100%;
  height: 100%;
}
.action-bar {
  margin-inline: 3%;
  margin-bottom: 1.5%;
  padding-bottom: 1.5%;
  display: flex;
  justify-content: space-between;
  position: relative;
  &::after{
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0.945px;
    opacity: 0.6;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) -27.95%, #FFF 48.21%, rgba(255, 255, 255, 0.00) 124.37%);
  }
}
.searcher-container{
  display: flex;
  width: fit-content;
  position: relative;
}
.searcher-container input{
  border-radius: 8px;
  border: 0.945px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.10);
  padding: 0.5rem 1rem;
  box-shadow: 0px 47.262px 94.523px 0px rgba(255, 255, 255, 0.15) inset, 0px 4.726px 9.452px 0px rgba(0, 0, 0, 0.05), 0px 14.178px 28.357px 0px rgba(0, 0, 0, 0.05), 0px 28.357px 56.714px 0px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(15.888577461242676px);
  outline: none;
  color: white;
}
.searcher-container button{
  width: 1.5vw;
  height: 1.5vw;
  position: absolute;
  right: 3%;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 25%;
  border-radius: 8px;
  border: 0.794px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 88.89%);
  box-shadow: 0px 0.794px 0px 0px rgba(0, 0, 0, 0.05), 0px 3.178px 3.178px 0px rgba(0, 0, 0, 0.05), 0px 7.944px 7.944px 0px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(7.944288730621338px);
  z-index: 1;
  cursor: pointer;
}
.searcher-container button img{
  width: 50%;
  height: auto;
}
.radio-container{
  display: flex;
  align-items: center;
}
.radio-container fieldset{
  border: none;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.radio-container label{
  font-size: 1rem;
  width: fit-content;
  color: rgba(255, 255, 255, 0.6);
}
.radio-container input{
  display: none;
}
.radio-container input:checked+label{
  border-radius: 12px;
  border: 0.945px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.10);
  box-shadow: 0px 47.262px 94.523px 0px rgba(255, 255, 255, 0.15) inset, 0px 4.726px 9.452px 0px rgba(0, 0, 0, 0.05), 0px 14.178px 28.357px 0px rgba(0, 0, 0, 0.05), 0px 28.357px 56.714px 0px rgba(0, 0, 0, 0.10);
  padding: 0.5rem 1rem;
  transition: all 0.3s;
  color: white;
}
.categories-filter{
  display: flex;
  align-items: center;
  min-width: 10%;
  position: relative;
  height: fit-content;
}
.categories-filter select{
  border-radius: 8px;
  border: 0.945px solid rgba(255, 255, 255, 0.07);
  background-color: rgba(0, 0, 0, 0.10);
  padding: 0.5rem 1rem;
  box-shadow: 0px 47.262px 94.523px 0px rgba(255, 255, 255, 0.15) inset, 0px 4.726px 9.452px 0px rgba(0, 0, 0, 0.05), 0px 14.178px 28.357px 0px rgba(0, 0, 0, 0.05), 0px 28.357px 56.714px 0px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(15.888577461242676px);
  color: rgba(255, 255, 255, 0.5);
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  appearance: none;
  width: 100%;
  outline: none;
}
.categories-filter select option{
  background-color: rgba(0, 0, 0, 0.70);
}
.categories-filter label{
  position: absolute;
  right: 4%;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 25px;
  height: 25px;
  transform:rotateZ(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  border-radius: 8px;
  border: 0.794px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 88.89%);
  box-shadow: 0px 0.794px 0px 0px rgba(0, 0, 0, 0.05), 0px 3.178px 3.178px 0px rgba(0, 0, 0, 0.05), 0px 7.944px 7.944px 0px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(7.944288730621338px);
}

.catalog-container{
  display: flex;
  flex-wrap: wrap;
  gap: 4%;
  padding-inline: 3%;
}
.catalog-item{
  width: 22%;
  height: auto;
  margin-bottom: 3%;
}
.catalog-item img{
  width: 100%;
  height: auto;
}

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
} 
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid;
  border-color: gray #0000;
  animation: l1 1s infinite;
}
.action-button{
  display: flex;
  justify-content: center;
  margin-top: 2%;
}
.action-bar-mobile{
  display: none;
}
#catalog-nav-link{
  list-style: disc;
  list-style-position: inside;
}
#catalog-nav-link a{
  color: white;
}
@keyframes l1 {to{transform: rotate(.5turn)}}

@media (width < 1020px) {
  .brands-hero-content{
    height: 400px;
  }
  .brands-hero-container{
    background-position: center;
  }
  .catalog-container{
    gap: calc(10% - 40px);
  }
  .catalog-item{ 
    width: 30%;
  }
  .action-bar-mobile{
    display: block;
    margin-bottom: 20px;
  }
  .action-bar{
    display: none;
  }
  .brands-hero-content{
    visibility: hidden;
  }
  .catalog-content{
    margin-top: -300px;
  }
  .brands-hero-content-mb{
    height: 250px;
    display: flex;
    gap: 20px;
    margin-bottom: 5%;
    margin-inline: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    border: 0.945px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.10);
    box-shadow: 0px 47.262px 94.523px 0px rgba(255, 255, 255, 0.15) inset, 0px 4.726px 9.452px 0px rgba(0, 0, 0, 0.05), 0px 14.178px 28.357px 0px rgba(0, 0, 0, 0.05), 0px 28.357px 56.714px 0px rgba(0, 0, 0, 0.10);
  }
  .brands-hero-content-mb h1{
    font-weight: 500;
    text-align: center;
    font-size: 30px;
  }
  .searcher-container{
    width: 100%;
  }
  .searcher-container input{
    width: 100%;
    height: 40px;
  }
  .searcher-container button{
    width: 25px;
    height: 25px;
  }
  .categories-filter{
    padding: 0 20px;
  }
  .categories-filter label{
    top: -38%;
    right: 30px;
  }
  .action-button{
    margin-bottom: 40px;
  }
}
@media (width < 500px) {
  .catalog-item{ 
    width: 100%;
    margin-bottom: 30px;
  }
  
  .catalog-container{
    gap: 0;
    padding-inline: 20px;
  }
}