@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=League+Spartan:wght@100..900&display=swap");
html {
  background-color: rgb(255, 255, 255);
  color: #ffffff;
  padding: 0%;
  margin: 0;
  font-family: "Afacad";
  width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0%;
  overflow-x: hidden;
}

/* === ONAMA hero: 50% device visine minus header+categories === */
:root {
  --kc-headerH: 0px; /* JS postavlja stvarnu visinu headera + categories u px */
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #2e2e2e21;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  width: 100%;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: var(--kc-headerH);
}

.about-section {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: 100vw;
  height: fit-content;
  color: #2b2b2b;
  align-items: center;
  justify-content: center;
}

.about-text h2 {
  font-size: 2rem;
  align-items: center;
  text-align: center;
}

.about-text p {
  min-width: 280px;
  width: 50vw;
  font-size: 1.2rem;
}

.brands-all h2 {
  width: 100%;
  font-size: 2rem;
  text-align: center;
}

.brand-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2vw, 18px);
  padding-inline: 1rem; /* min 1rem margine s obje strane */
  margin: 0 auto;
  justify-content: center; /* centriraj redove */
  align-items: center;
  max-width: 60vw;
}

/* Svaki item: fleksibilan, smanjuje se do 100px, pa tek onda wrap */
.brand-list li {
  flex: 1 1 160px; /* početna širina ~160px */
  min-width: 50px; /* ne ide ispod 100px */
  max-width: 180px; /* po želji gornji limit (makni ako ne treba) */
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-list img.remer,
.brand-list img.ths {
  width: 80px;
}

/* Slika ispunjava svoj fleks-boks, ali poštuje min 100px */
.brand-list img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.brands-all {
  margin-bottom: 10rem;
}

/* Responsive */

@media (max-width: 560px) {
  .cats-grid {
    grid-template-columns: 1fr;
    overflow-x: auto;
  }
  .about-text p {
    font-size: 1rem;
  }
}