@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 {
  /* ključne stvari */
  position: relative;
  box-sizing: border-box;
  padding-top: var(--kc-headerH, 0px); /* sadržaj počinje ispod nav-a */
  min-height: calc(
    40dvh + var(--kc-headerH, 0px)
  ); /* 50% ekrana + visina nav-a */
  min-height: calc(40svh + var(--kc-headerH, 0px)); /* fallback */
  min-height: calc(40vh + var(--kc-headerH, 0px)); /* fallback */

  display: grid;
  place-items: center;
  width: 100%;

  /* tvoji ostali stilovi */
  background-color: #2e2e2e21;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  overflow: hidden;
}

.hero-header-backdrop-positioner {
  padding-top: var(--kc-headerH, 0px); /* sadržaj počinje ispod nav-a */
  min-height: calc(
    40dvh + var(--kc-headerH, 0px)
  ); /* 50% ekrana + visina nav-a */
  min-height: calc(40svh + var(--kc-headerH, 0px)); /* fallback */
  min-height: calc(40vh + var(--kc-headerH, 0px)); /* fallback */

  position: absolute;
  display: grid;
  place-items: center; /* >>> centriraj backdrop točno kao i tekst */
  pointer-events: none;
  z-index: 1; /* ispod teksta */
}

.hero-header-backdrop {
  width: clamp(90px, 30vw, 220px);
  height: auto;
}

.hero-header {
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero-header h1 {
  font-family: "League Spartan", system-ui, sans-serif;
  font-size: clamp(2.6rem, 2rem + 2.8vw, 5.5rem);
  line-height: 1.05; /* po želji */
  margin: 0;
}

.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;
  }
}