*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --ci-zaglavlje-visina: 140px;
  --ci-glavni-max-sirina: 1490px;
  --ci-brzina-prijelaza: 0.4s;
  --ci-radijus-granice: 12px;
  --ci-sjena-ploha: 0 8px 24px rgba(0, 0, 0, 0.15);
  --ci-gradijent-pozadina-1: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  --ci-gradijent-pozadina-2: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
  --ci-gradijent-pozadina-3: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
  --ci-gradijent-pozadina-4: linear-gradient(135deg, #fd746c 0%, #ff9068 100%);
  --ci-bojanje-teksta-primarni: #2d3748;
  --ci-bojanje-teksta-sekundarni: #4a5568;
  --ci-bojanje-pozadina-primarni: rgba(255, 255, 255, 0.92);
  --ci-bojanje-pozadina-sekundarni: rgba(247, 250, 252, 0.85);
  --ci-bojanje-istaknuto-1: #6a11cb;
  --ci-bojanje-istaknuto-2: #2575fc;
  --ci-bojanje-istaknuto-3: #ff6b6b;
  --ci-bojanje-istaknuto-4: #00b09b;
}

body {
  font-family: 'Quicksand', sans-serif;
  color: var(--ci-bojanje-teksta-primarni);
  line-height: 1.6;
  position: relative;
  min-height: 100vh;
}

.ci-background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/ci-core/ci-imgs/background-visual-image.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.ci-zaglavlje {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  position: relative;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.ci-zaglavlje-sadrzaj {
  width: 100%;
  margin: 0 auto;
}

.ci-zaglavlje-gornji-dio {
  background: var(--ci-gradijent-pozadina-1);
  color: white;
  padding: 1.5rem 1rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ci-podrska-linija {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.ci-podrska-linija a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.ci-zaglavlje-donji-dio {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1.5rem;
  min-height: 80px;
}

.ci-logo-sekcija {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ci-logo-slika {
  width: 100%;
  max-width: 50px;
  height: 100%;
  max-height: 50px;
}

.ci-naziv-sajta {
  font-family: 'Alegreya SC', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ci-bojanje-istaknuto-1);
}

.ci-navigacijski-izbornik {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.ci-navigacijska-poveznica {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ci-bojanje-teksta-primarni);
  font-weight: 500;
  transition: color var(--ci-brzina-prijelaza);
  padding: 0.5rem 0;
}

.ci-navigacijska-poveznica:hover {
  color: var(--ci-bojanje-istaknuto-1);
}

.ci-mobilni-izbornik-gumb {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.ci-mobilni-izbornik-crta {
  width: 25px;
  height: 3px;
  background: var(--ci-bojanje-teksta-primarni);
  transition: var(--ci-brzina-prijelaza);
}

.ci-glavni-sadrzaj {
  max-width: var(--ci-glavni-max-sirina);
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.ci-dobrodoslica-sekcija {
  padding: 6rem 0;
  margin: 2rem auto;
  text-align: center;
  background: var(--ci-bojanje-pozadina-sekundarni);
  border-radius: var(--ci-radijus-granice);
}

.ci-dobrodoslica-sadrzaj h1 {
  font-family: 'Alegreya SC', serif;
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  background: var(--ci-gradijent-pozadina-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-height: 4.5rem;
}

.ci-dobrodoslica-tekst {
  max-width: 800px;
  margin: 0 auto;
}

.ci-dobrodoslica-tekst p {
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  color: var(--ci-bojanje-teksta-primarni);
}

.ci-dobrodoslica-tekst-ph {
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  color: var(--ci-bojanje-teksta-primarni);
}

.ci-informativni-blokovi {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 3rem;
  justify-content: center;
}

.ci-informativni-blok {
  background: var(--ci-bojanje-pozadina-primarni);
  padding: 1.5rem;
  border-radius: var(--ci-radijus-granice);
  box-shadow: var(--ci-sjena-ploha);
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 300px;
}

.ci-informativni-blok .material-icons {
  color: var(--ci-bojanje-istaknuto-1);
  font-size: 2rem;
}

.ci-pregled-poveznica {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ci-gradijent-pozadina-1);
  color: white;
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 500;
  transition: transform var(--ci-brzina-prijelaza);
}

.ci-pregled-poveznica:hover {
  transform: translateY(-3px);
}

.ci-platforme-sekcija {
  padding: 5rem 0;
  background: var(--ci-bojanje-pozadina-sekundarni);
  border-radius: var(--ci-radijus-granice);
  margin: 2rem 0;
}

.ci-platforme-sadrzaj {
  padding: 0 2rem;
}

.ci-platforme-sadrzaj h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--ci-bojanje-istaknuto-2);
  min-height: 3rem;
}

.ci-platforme-opis {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 1.1rem;
  color: var(--ci-bojanje-teksta-sekundarni);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.ci-platforme-lista {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.ci-platforma-kartica {
  background: var(--ci-bojanje-pozadina-primarni);
  border-radius: var(--ci-radijus-granice);
  padding: 2rem;
  box-shadow: var(--ci-sjena-ploha);
  transition: transform var(--ci-brzina-prijelaza);
}

.ci-platforma-kartica:hover {
  transform: translateY(-5px);
}

.ci-platforma-zaglavlje {
  margin-bottom: 1.5rem;
}

.ci-platforma-logo-ocjena {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.ci-platforma-logo {
  width: 100%;
  max-width: 120px;
  height: 100%;
  max-height: 60px;
}

.ci-platforma-ocjena {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fbbf24;
}

.ci-ocjena-broj {
  font-weight: 700;
  color: var(--ci-bojanje-teksta-primarni);
}

.ci-platforma-zaglavlje h3 {
  font-family: 'Alegreya SC', serif;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  min-height: 2rem;
}

.ci-platforma-tip {
  background: var(--ci-gradijent-pozadina-3);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  display: inline-block;
}

.ci-platforma-prednosti {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.ci-platforma-prednost {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ci-bojanje-pozadina-sekundarni);
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

.ci-platforma-prednost .material-icons {
  color: var(--ci-bojanje-istaknuto-3);
  font-size: 1.2rem;
}

.ci-platforma-placanja {
  margin-bottom: 2rem;
}

.ci-platforma-placanja h4 {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  min-height: 1.5rem;
}

.ci-placanja-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ci-placanje-opcija {
  background: var(--ci-gradijent-pozadina-4);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.ci-platforma-poveznica {
  display: inline-block;
  background: var(--ci-gradijent-pozadina-2);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: transform var(--ci-brzina-prijelaza);
}

.ci-platforma-poveznica:hover {
  transform: scale(1.05);
}

.ci-kriteriji-sekcija {
  padding: 5rem 0;
  background: var(--ci-bojanje-pozadina-sekundarni);
  border-radius: var(--ci-radijus-granice);
}

.ci-kriteriji-sadrzaj h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--ci-bojanje-istaknuto-3);
  min-height: 3rem;
}

.ci-kriteriji-opis {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 1.1rem;
  color: var(--ci-bojanje-teksta-primarni);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.ci-kriteriji-lista {
  display: flex;
  gap: 2rem;
  padding: 1rem;
  justify-content: space-between;
}

.ci-kriterij-stupac {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1;
}

.ci-kriterij-element {
  background: var(--ci-bojanje-pozadina-primarni);
  padding: 2rem;
  border-radius: var(--ci-radijus-granice);
  box-shadow: var(--ci-sjena-ploha);
  text-align: center;
}

.ci-kriterij-element .material-icons {
  font-size: 3rem;
  color: var(--ci-bojanje-istaknuto-4);
  margin-bottom: 1rem;
}

.ci-kriterij-element h3 {
  font-family: 'Alegreya SC', serif;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  min-height: 2rem;
}

.ci-kriterij-element p {
  min-height: 103px;
}

.ci-odgovorna-igra-sekcija {
  padding: 5rem 1rem;
  background: var(--ci-bojanje-pozadina-sekundarni);
  border-radius: var(--ci-radijus-granice);
  margin: 2rem 0;
}

.ci-odgovorna-igra-sadrzaj {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: center;
}

.ci-odgovorna-igra-tekst {
  flex: 1;
}

.ci-odgovorna-igra-tekst h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  color: var(--ci-bojanje-istaknuto-1);
  min-height: 2.8rem;
}

.ci-odgovorna-igra-tekst p {
  margin-bottom: 2rem;
  line-height: 1.7;
}

.ci-odgovorna-igra-tekst a {
  color: var(--ci-bojanje-istaknuto-2);
  text-decoration: none;
  font-weight: 500;
}

.ci-odgovorna-poveznica {
  display: inline-block;
  background: var(--ci-gradijent-pozadina-1);
  color: white !important;
  padding: 1rem 2rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: transform var(--ci-brzina-prijelaza);
}

.ci-odgovorna-poveznica:hover {
  transform: translateY(-3px);
}

.ci-odgovorna-igra-partneri {
  flex: 1;
}

.ci-partneri-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
}

.ci-partner-poveznica {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  padding: 1rem;
  border-radius: var(--ci-radijus-granice);
  box-shadow: var(--ci-sjena-ploha);
  transition: transform var(--ci-brzina-prijelaza);
  width: 160px;
  height: 90px;
}

.ci-partner-poveznica:hover {
  transform: scale(1.05);
}

.ci-partner-poveznica img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ci-dobna-ogranicenja {
  background: var(--ci-gradijent-pozadina-2);
  color: white;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: var(--ci-sjena-ploha);
}

.ci-o-nama-sekcija {
  padding: 5rem 0;
  background: var(--ci-bojanje-pozadina-sekundarni);
  border-radius: var(--ci-radijus-granice);
}

.ci-o-nama-sadrzaj {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.ci-o-nama-vizual {
  text-align: center;
}

.ci-o-nama-vizual img {
  width: 100%;
  max-width: 1450px;
  height: 100%;
  max-height: 400px;
  border-radius: var(--ci-radijus-granice);
  box-shadow: var(--ci-sjena-ploha);
}

.ci-o-nama-tekstovi {
  display: flex;
  gap: 3rem;
}

.ci-o-nama-blok {
  flex: 1;
  background: var(--ci-bojanje-pozadina-primarni);
  padding: 2rem;
  border-radius: var(--ci-radijus-granice);
  box-shadow: var(--ci-sjena-ploha);
}

.ci-o-nama-blok h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--ci-bojanje-istaknuto-4);
  min-height: 2.5rem;
}

.ci-o-nama-blok p {
  margin-bottom: 2rem;
  line-height: 1.7;
}

.ci-prednosti-mreza {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.ci-prednost-celija {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--ci-bojanje-pozadina-sekundarni);
  padding: 1rem;
  border-radius: 10px;
}

.ci-prednost-celija .material-icons {
  color: var(--ci-bojanje-istaknuto-1);
}

.ci-saznaj-vise-poveznica {
  display: inline-block;
  background: var(--ci-gradijent-pozadina-3);
  color: white;
  padding: 1rem 2rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: transform var(--ci-brzina-prijelaza);
  align-self: center;
}

.ci-saznaj-vise-poveznica:hover {
  transform: translateY(-3px);
}

.ci-podnozje {
  background: rgba(45, 55, 72, 0.9);
  color: white;
  margin-top: 4rem;
}

.ci-podnozje-sadrzaj {
  max-width: var(--ci-glavni-max-sirina);
  margin: 0 auto;
  padding: 0 1rem;
}

.ci-podnozje-odgovorna-igra {
  padding: 3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ci-podnozje-odgovorna-igra h3 {
  font-family: 'Alegreya SC', serif;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  min-height: 2.2rem;
}

.ci-podnozje-odgovorna-igra p {
  margin-bottom: 2rem;
  line-height: 1.7;
}

.ci-podnozje-odgovorna-igra a {
  color: #63b3ed;
  text-decoration: none;
}

.ci-odgovorna-poveznica-podnozje {
  display: inline-block;
  background: var(--ci-gradijent-pozadina-1);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 2rem;
  transition: transform var(--ci-brzina-prijelaza);
}

.ci-odgovorna-poveznica-podnozje:hover {
  transform: translateY(-2px);
}

.ci-partneri-podnozje {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
}

.ci-partner-poveznica-podnozje {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.75rem;
  border-radius: 8px;
  transition: transform var(--ci-brzina-prijelaza);
  width: 140px;
  height: 70px;
}

.ci-partner-poveznica-podnozje:hover {
  transform: scale(1.05);
}

.ci-partner-poveznica-podnozje img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ci-dobna-ogranicenja-podnozje {
  background: var(--ci-gradijent-pozadina-2);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.ci-podnozje-informacije {
  padding: 2rem 0;
}

.ci-podnozje-navigacija {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.ci-podnozje-naziv {
  font-family: 'Alegreya SC', serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.ci-podnozje-poveznice {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
}

.ci-podnozje-poveznice a {
  color: white;
  text-decoration: none;
  transition: color var(--ci-brzina-prijelaza);
}

.ci-podnozje-poveznice a:hover {
  color: #63b3ed;
}

.ci-podnozje-autorska-prava {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
  gap: 1rem;
}

.ci-podnozje-dodatne-poveznice {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.ci-podnozje-dodatne-poveznice a {
  color: #cbd5e0;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--ci-brzina-prijelaza);
}

.ci-podnozje-dodatne-poveznice a:hover {
  color: white;
}

.ci-dobna-provierka-pozadina {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  overflow-y: auto;
}

.ci-dobna-provierka-dijalog {
  background: white;
  border-radius: var(--ci-radijus-granice);
  padding: 3rem;
  max-width: 500px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: ci-dijalog-pojavljivanje 0.5s ease-out;
}

.ci-dobna-provierka-sadrzaj h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--ci-bojanje-istaknuto-1);
  min-height: 2.5rem;
}

.ci-dobna-provierka-sadrzaj p {
  margin-bottom: 2rem;
  color: var(--ci-bojanje-teksta-sekundarni);
}

.ci-dobna-provierka-gumbi {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.ci-dobna-provierka-potvrda {
  background: var(--ci-gradijent-pozadina-1);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 25px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--ci-brzina-prijelaza);
}

.ci-dobna-provierka-potvrda:hover {
  transform: scale(1.05);
}

.ci-dobna-provierka-odustajanje {
  background: transparent;
  color: var(--ci-bojanje-teksta-sekundarni);
  border: 2px solid var(--ci-bojanje-teksta-sekundarni);
  padding: 1rem 2rem;
  border-radius: 25px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ci-brzina-prijelaza);
}

.ci-dobna-provierka-odustajanje:hover {
  background: var(--ci-bojanje-teksta-sekundarni);
  color: white;
}

.ci-kolacici-obavijest-traka {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--ci-bojanje-pozadina-primarni);
  padding: 1.5rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index: 1500;
  overflow-y: auto;
}

.ci-kolacici-obavijest-sadrzaj {
  max-width: var(--ci-glavni-max-sirina);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ci-kolacici-obavijest-sadrzaj p {
  flex: 1;
  margin: 0;
}

.ci-kolacici-obavijest-sadrzaj a {
  color: var(--ci-bojanje-istaknuto-2);
  text-decoration: none;
  font-weight: 500;
}

.ci-kolacici-pridruzivanje {
  background: var(--ci-gradijent-pozadina-1);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--ci-brzina-prijelaza);
  white-space: nowrap;
}

.ci-kolacici-pridruzivanje:hover {
  transform: scale(1.05);
}

.ci-povratna-veza-preklapanje {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  overflow-y: auto;
}

.ci-povratna-veza-modal {
  background: white;
  border-radius: var(--ci-radijus-granice);
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: ci-dijalog-pojavljivanje 0.5s ease-out;
  overflow-y: auto;
}

.ci-povratna-veza-zatvaranje {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  color: var(--ci-bojanje-teksta-sekundarni);
  transition: color var(--ci-brzina-prijelaza);
}

.ci-povratna-veza-zatvaranje:hover {
  color: var(--ci-bojanje-teksta-primarni);
}

.ci-povratna-veza-sadrzaj h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--ci-bojanje-istaknuto-1);
  min-height: 2.5rem;
}

.ci-povratna-veza-obrazac {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ci-obrazac-grupa {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ci-obrazac-grupa label {
  font-weight: 500;
  color: var(--ci-bojanje-teksta-primarni);
}

.ci-obrazac-grupa input,
.ci-obrazac-grupa textarea {
  padding: 0.75rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-family: 'Quicksand', sans-serif;
  transition: border-color var(--ci-brzina-prijelaza);
}

.ci-obrazac-grupa input:focus,
.ci-obrazac-grupa textarea:focus {
  outline: none;
  border-color: var(--ci-bojanje-istaknuto-1);
}

.ci-obrazac-slanganje {
  background: var(--ci-gradijent-pozadina-1);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 25px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--ci-brzina-prijelaza);
  align-self: flex-start;
}

.ci-obrazac-slanganje:hover {
  transform: scale(1.05);
}

.ci-uspjeh-poruka-obavijest {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: var(--ci-radijus-granice);
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 2000;
  display: none;
  animation: ci-dijalog-pojavljivanje 0.5s ease-out;
  overflow-y: auto;
}

.ci-uspjeh-poruka-sadrzaj .material-icons {
  font-size: 4rem;
  color: #48bb78;
  margin-bottom: 1rem;
}

.ci-uspjeh-poruka-sadrzaj h3 {
  font-family: 'Alegreya SC', serif;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  min-height: 2rem;
}

.ci-uspjeh-poruka-sadrzaj p {
  margin-bottom: 1.5rem;
  color: var(--ci-bojanje-teksta-sekundarni);
}

.ci-uspjeh-poruka-zatvaranje {
  background: var(--ci-gradijent-pozadina-1);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--ci-brzina-prijelaza);
}

.ci-uspjeh-poruka-zatvaranje:hover {
  transform: scale(1.05);
}

@keyframes ci-dijalog-pojavljivanje {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (max-width: 1024px) {
  .ci-kriteriji-lista {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .ci-kriterij-stupac {
    flex-direction: row;
  }
  
  .ci-o-nama-tekstovi {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .ci-zaglavlje-donji-dio {
    flex-wrap: wrap;
  }
  
  .ci-navigacijski-izbornik {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }
  
  .ci-navigacijski-izbornik.ci-aktivno {
    display: flex;
  }
  
  .ci-mobilni-izbornik-gumb {
    display: flex;
  }
  
  .ci-mobilni-izbornik-gumb.ci-aktivno .ci-mobilni-izbornik-crta:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  
  .ci-mobilni-izbornik-gumb.ci-aktivno .ci-mobilni-izbornik-crta:nth-child(2) {
    opacity: 0;
  }
  
  .ci-mobilni-izbornik-gumb.ci-aktivno .ci-mobilni-izbornik-crta:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
  
  .ci-dobrodoslica-sadrzaj h1 {
    font-size: 2.5rem;
    min-height: 3.5rem;
  }
  
  .ci-informativni-blokovi {
    flex-direction: column;
    align-items: center;
  }
  
  .ci-platforme-sadrzaj {
    padding: 0 0.5rem;
  }
  
  .ci-kriterij-stupac {
    flex-direction: column;
  }
  
  .ci-odgovorna-igra-sadrzaj {
    flex-direction: column;
  }
  
  .ci-partneri-lista {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ci-podnozje-navigacija {
    flex-direction: column;
    text-align: center;
  }
  
  .ci-podnozje-autorska-prava {
    flex-direction: column;
    text-align: center;
  }
  
  .ci-dobna-provierka-gumbi {
    flex-direction: column;
  }
  
  .ci-kolacici-obavijest-sadrzaj {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .ci-glavni-sadrzaj,
  .ci-podnozje-sadrzaj {
    padding: 0 0.5rem;
  }
  
  .ci-dobrodoslica-sekcija,
  .ci-platforme-sekcija,
  .ci-kriteriji-sekcija,
  .ci-odgovorna-igra-sekcija,
  .ci-o-nama-sekcija {
    padding: 3rem 0;
  }
  
  .ci-dobrodoslica-sadrzaj h1 {
    font-size: 2rem;
    min-height: 3rem;
  }
  
  .ci-platforme-sadrzaj h2,
  .ci-kriteriji-sadrzaj h2 {
    font-size: 2rem;
    min-height: 2.5rem;
  }
  
  .ci-platforma-prednosti {
    flex-direction: column;
  }
  
  .ci-partneri-lista {
    grid-template-columns: 1fr;
  }
  
  .ci-prednosti-mreza {
    grid-template-columns: 1fr;
  }
  
  .ci-dobna-provierka-dijalog,
  .ci-povratna-veza-modal,
  .ci-uspjeh-poruka-obavijest {
    padding: 1.5rem;
  }
}

@media (max-width: 320px) {
  .ci-glavni-sadrzaj,
  .ci-podnozje-sadrzaj {
    padding: 0 0.3rem;
  }
  
  .ci-dobrodoslica-sekcija,
  .ci-platforme-sekcija,
  .ci-kriteriji-sekcija,
  .ci-odgovorna-igra-sekcija,
  .ci-o-nama-sekcija {
    padding: 2rem 0;
  }
  
  .ci-informativni-blok {
    padding: 1rem;
  }
  
  .ci-platforma-kartica {
    padding: 1rem;
  }
  
  .ci-kriterij-element {
    padding: 1rem;
  }
  
  .ci-o-nama-blok {
    padding: 1rem;
  }
  
  .ci-dobna-provierka-dijalog,
  .ci-povratna-veza-modal,
  .ci-uspjeh-poruka-obavijest {
    padding: 1rem;
  }
}

.cipages-404-sadrzaj {
  max-width: 1490px;
  min-height: 80vh;
  display: flex;
  align-items: center;
  margin: 2rem auto;
  padding: 0 1rem;
  background: var(--ci-bojanje-pozadina-sekundarni);
  border-radius: var(--ci-radijus-granice);
}

.cipages-404-omotac {
  max-width: 1490px;
  margin: 0 auto;
}

.cipages-404-sekcija {
  padding: 4rem 0;
  margin: 0 auto;
}

.cipages-404-sadrzaj {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

.cipages-404-vizual {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.cipages-404-svg-animacija {
  width: 400px;
  height: 300px;
}

.cipages-404-tekst {
  padding: 2rem;
}

.cipages-404-tekst h1 {
  font-family: 'Alegreya SC', serif;
  font-size: 3rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-height: 3.5rem;
}

.cipages-404-tekst > p {
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  color: #4a5568;
  line-height: 1.7;
}

.cipages-404-savjeti {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.cipages-404-savjet {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: rgba(106, 17, 203, 0.05);
  border-radius: 12px;
  border-left: 4px solid #6a11cb;
}

.cipages-404-savjet .material-icons {
  color: #6a11cb;
  flex-shrink: 0;
}

.cipages-404-savjet span:last-child {
  color: #4a5568;
  font-weight: 500;
}

.cipages-404-akcije {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.cipages-404-gumb-primarni {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.3s ease;
}

.cipages-404-gumb-primarni:hover {
  transform: translateY(-2px);
}

.cipages-404-gumb-sekundarni {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  color: #6a11cb;
  padding: 1rem 2rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  border: 2px solid #6a11cb;
  transition: all 0.3s ease;
}

.cipages-404-gumb-sekundarni:hover {
  background: rgba(106, 17, 203, 0.1);
  transform: translateY(-2px);
}

.cipages-404-dodatne-informacije {
  padding: 1.5rem;
  background: rgba(255, 107, 107, 0.05);
  border-radius: 15px;
  border-left: 4px solid #ff6b6b;
}

.cipages-404-dodatne-informacije p {
  color: #4a5568;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.cipages-404-kontakt-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cipages-404-kontakt-info .material-icons {
  color: #ff6b6b;
}

.cipages-404-kontakt-info a {
  color: #ff6b6b;
  text-decoration: none;
  font-weight: 500;
}

.cipages-404-kontakt-info a:hover {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .cipages-404-sadrzaj {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .cipages-404-sadrzaj {
    min-height: 70vh;
  }
  
  .cipages-404-sekcija {
    padding: 3rem 0;
  }
  
  .cipages-404-tekst h1 {
    font-size: 2.5rem;
    min-height: 3rem;
  }
  
  .cipages-404-akcije {
    justify-content: center;
  }
  
  .cipages-404-svg-animacija {
    width: 300px;
    height: 225px;
  }
}

@media (max-width: 480px) {
  .cipages-404-sadrzaj {
    padding: 0 0.5rem;
  }

  .cipages-404-tekst {
    padding: 1rem 0.1rem;
  }
  
  .cipages-404-tekst h1 {
    font-size: 2rem;
    min-height: 2.5rem;
  }
  
  .cipages-404-tekst > p {
    font-size: 1.1rem;
  }
  
  .cipages-404-akcije {
    flex-direction: column;
    align-items: center;
  }
  
  .cipages-404-gumb-primarni,
  .cipages-404-gumb-sekundarni {
    width: 250px;
    justify-content: center;
  }

  .cipages-404-vizual {
    padding: 2rem 0.2rem;
  }
  
  .cipages-404-svg-animacija {
    width: 250px;
    height: 188px;
  }

  .cipages-404-kontakt-info {
    font-size: 0.7rem;
  }
}

@media (max-width: 320px) {
  .cipages-404-sadrzaj {
    padding: 0 0.3rem;
  }
  
  .cipages-404-sekcija {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
  
  .cipages-404-savjet {
    padding: 0.75rem 1rem;
  }
}

.cipages-faq-sadrzaj {
  max-width: 1490px;
  margin: 2rem auto;
  padding: 0 1rem;
  background: var(--ci-bojanje-pozadina-sekundarni);
  border-radius: var(--ci-radijus-granice);
}

.cipages-faq-omotac {
  max-width: 1000px;
  margin: 0 auto;
}

.cipages-faq-hero {
  padding: 4rem 0 3rem;
  text-align: center;
}

.cipages-faq-hero h1 {
  font-family: 'Alegreya SC', serif;
  font-size: 3rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-height: 3.5rem;
}

.cipages-faq-hero-sadrzaj {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2rem;
}

.cipages-faq-hero-tekst p {
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  color: #4a5568;
  line-height: 1.7;
  text-align: left;
}

.cipages-faq-brzi-linkovi {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cipages-faq-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(106, 17, 203, 0.1);
  color: #6a11cb;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.cipages-faq-link:hover {
  transform: translateY(-2px);
  background: rgba(106, 17, 203, 0.15);
}

.cipages-faq-hero-vizual {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.cipages-faq-svg-animacija {
  width: 250px;
  height: 250px;
}

.cipages-faq-sekcija {
  padding: 4rem 0;
  border-bottom: 1px solid #e2e8f0;
}

.cipages-faq-sekcija:last-of-type {
  border-bottom: none;
}

.cipages-faq-sekcija-zaglavlje {
  text-align: center;
  margin-bottom: 3rem;
}

.cipages-faq-sekcija-ikona {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0 auto 1.5rem;
}

.cipages-faq-sekcija-ikona .material-icons {
  font-size: 2.5rem;
}

.cipages-faq-sekcija h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2.2rem;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 2.8rem;
}

.cipages-faq-sekcija p {
  font-size: 1.1rem;
  color: #4a5568;
  max-width: 600px;
  margin: 0 auto;
}

.cipages-faq-lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cipages-faq-stavka {
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.cipages-faq-stavka:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.cipages-faq-pitanje {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  cursor: pointer;
  background: white;
  border: none;
  width: 100%;
  text-align: left;
}

.cipages-faq-pitanje .material-icons {
  color: #ff6b6b;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.cipages-faq-pitanje h3 {
  font-size: 1.2rem;
  margin: 0;
  color: #2d3748;
  flex: 1;
  min-height: 1.6rem;
}

.cipages-faq-ikona {
  font-size: 1.5rem;
  font-weight: 300;
  color: #6a11cb;
  transition: transform 0.3s ease;
}

.cipages-faq-stavka.aktivno .cipages-faq-ikona {
  transform: rotate(45deg);
}

.cipages-faq-odgovor {
  padding: 0 2rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.cipages-faq-stavka.aktivno .cipages-faq-odgovor {
  padding: 0 2rem 1.5rem;
  max-height: 500px;
}

.cipages-faq-odgovor p {
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

.cipages-faq-odgovor a {
  color: #00b09b;
  text-decoration: none;
  font-weight: 500;
}

.cipages-faq-odgovor a:hover {
  text-decoration: underline;
}

.cipages-faq-kontakt {
  padding: 4rem 0;
  text-align: center;
}

.cipages-faq-kontakt-sadrzaj {
  background: linear-gradient(135deg, rgba(0, 176, 155, 0.05) 0%, rgba(150, 201, 61, 0.05) 100%);
  padding: 3rem;
  border-radius: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.cipages-faq-kontakt h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2.2rem;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 2.8rem;
}

.cipages-faq-kontakt p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #4a5568;
  line-height: 1.6;
}

.cipages-faq-kontakt-gumb {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.3s ease;
}

.cipages-faq-kontakt-gumb:hover {
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .cipages-faq-hero-sadrzaj {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  
  .cipages-faq-hero-tekst p {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .cipages-faq-hero {
    padding: 3rem 0 2rem;
  }
  
  .cipages-faq-hero h1 {
    font-size: 2.2rem;
    min-height: 2.8rem;
  }
  
  .cipages-faq-sekcija {
    padding: 3rem 0;
  }
  
  .cipages-faq-sekcija h2 {
    font-size: 1.8rem;
    min-height: 2.3rem;
  }
  
  .cipages-faq-pitanje {
    padding: 1.25rem 1.5rem;
  }
  
  .cipages-faq-pitanje h3 {
    font-size: 1.1rem;
  }

  .cipages-faq-hero-vizual {
    padding: 2rem 0.3rem;
  }
  
  .cipages-faq-stavka.aktivno .cipages-faq-odgovor {
    padding: 0 1.5rem 1.25rem;
  }
  
  .cipages-faq-kontakt h2 {
    font-size: 1.8rem;
    min-height: 2.3rem;
  }
  
  .cipages-faq-kontakt-sadrzaj {
    padding: 2.5rem;
  }
}

@media (max-width: 480px) {
  .cipages-faq-sadrzaj {
    padding: 0 0.5rem;
  }
  
  .cipages-faq-hero h1 {
    font-size: 1.8rem;
    min-height: 2.3rem;
  }
  
  .cipages-faq-brzi-linkovi {
    flex-direction: column;
    align-items: center;
  }
  
  .cipages-faq-link {
    width: 200px;
    justify-content: center;
  }
  
  .cipages-faq-sekcija h2 {
    font-size: 1.5rem;
    min-height: 2rem;
  }
  
  .cipages-faq-pitanje {
    padding: 1rem 1.25rem;
  }
  
  .cipages-faq-pitanje h3 {
    font-size: 1rem;
  }
  
  .cipages-faq-stavka.aktivno .cipages-faq-odgovor {
    padding: 0 1.25rem 1rem;
  }
  
  .cipages-faq-kontakt h2 {
    font-size: 1.5rem;
    min-height: 2rem;
  }
  
  .cipages-faq-kontakt-sadrzaj {
    padding: 2rem 1.5rem;
  }

  .cipages-faq-odgovor a {
    font-size: 0.9rem;
  }
}

@media (max-width: 320px) {
  .cipages-faq-sadrzaj {
    padding: 0 0.3rem;
  }
  
  .cipages-faq-hero,
  .cipages-faq-sekcija,
  .cipages-faq-kontakt {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
}

.cipages-about-sadrzaj {
  max-width: 1490px;
  margin: 2rem auto;
  padding: 0 1rem;
  background: var(--ci-bojanje-pozadina-sekundarni);
  border-radius: var(--ci-radijus-granice);
}

.cipages-about-omotac {
  max-width: 1200px;
  margin: 0 auto;
}

.cipages-about-put {
  padding: 4rem 0 3rem;
}

.cipages-about-put h1 {
  font-family: 'Alegreya SC', serif;
  font-size: 3rem;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-height: 3.5rem;
  text-align: center;
}

.cipages-about-put-sadrzaj {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.cipages-about-put-tekst p {
  font-size: 1.2rem;
  margin-bottom: 3rem;
  color: #4a5568;
  line-height: 1.7;
}

.cipages-about-vremenska-linija {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  position: relative;
}

.cipages-about-vremenska-linija:before {
  content: '';
  position: absolute;
  left: 35px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border-radius: 2px;
}

.cipages-about-dogadaj {
  display: flex;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

.cipages-about-dogadaj-ikona {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  z-index: 2;
}

.cipages-about-dogadaj-ikona .material-icons {
  font-size: 2rem;
}

.cipages-about-dogadaj-sadrzaj {
  flex: 1;
  padding-top: 0.5rem;
}

.cipages-about-dogadaj h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: #2d3748;
  min-height: 1.8rem;
}

.cipages-about-datum {
  display: inline-block;
  background: rgba(106, 17, 203, 0.1);
  color: #6a11cb;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.cipages-about-dogadaj p {
  color: #4a5568;
  line-height: 1.6;
}

.cipages-about-put-vizual {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.cipages-about-svg-animacija {
  width: 300px;
  height: 300px;
}

.cipages-about-misija {
  padding: 4rem 0;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.03) 0%, rgba(255, 167, 38, 0.03) 100%);
  border-radius: 25px;
  margin: 2rem 0;
}

.cipages-about-misija-sadrzaj {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.cipages-about-misija-blok {
  background: white;
  padding: 3rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.cipages-about-misija-blok:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
}

.cipages-about-misija-ikona {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 2rem;
}

.cipages-about-misija-ikona .material-icons {
  font-size: 2.5rem;
}

.cipages-about-misija-blok h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #2d3748;
  min-height: 2.5rem;
}

.cipages-about-misija-blok > p {
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  color: #4a5568;
  line-height: 1.6;
}

.cipages-about-prednosti {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cipages-about-prednost {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.cipages-about-prednost .material-icons {
  color: #ff6b6b;
  font-size: 1.8rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.cipages-about-prednost h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #2d3748;
  min-height: 1.6rem;
}

.cipages-about-prednost p {
  color: #4a5568;
  line-height: 1.6;
  font-size: 0.95rem;
}

.cipages-about-vrijednosti {
  padding: 4rem 0;
}

.cipages-about-vrijednosti h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 3rem;
}

.cipages-about-podnaslov {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 1.1rem;
  color: #4a5568;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cipages-about-vrijednosti-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.cipages-about-vrijednost {
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s ease;
}

.cipages-about-vrijednost:hover {
  transform: translateY(-5px);
}

.cipages-about-vrijednost-ikona {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0 auto 1.5rem;
}

.cipages-about-vrijednost-ikona .material-icons {
  font-size: 2.5rem;
}

.cipages-about-vrijednost h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 2rem;
}

.cipages-about-vrijednost > p {
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.cipages-about-vrijednost-lista {
  list-style: none;
  padding: 0;
  text-align: left;
}

.cipages-about-vrijednost-lista li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: #4a5568;
  line-height: 1.5;
}

.cipages-about-vrijednost-lista li:before {
  content: "•";
  color: #00b09b;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.cipages-about-tim {
  padding: 4rem 0;
  background: linear-gradient(135deg, rgba(106, 17, 203, 0.03) 0%, rgba(37, 117, 252, 0.03) 100%);
  border-radius: 25px;
  margin: 2rem 0;
}

.cipages-about-tim h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 3rem;
}

.cipages-about-tim-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.cipages-about-tim-clan {
  background: white;
  padding: 2.5rem 2rem;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s ease;
}

.cipages-about-tim-clan:hover {
  transform: translateY(-5px);
}

.cipages-about-tim-ikona {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0 auto 1.5rem;
}

.cipages-about-tim-ikona .material-icons {
  font-size: 2.2rem;
}

.cipages-about-tim-clan h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 4.4rem;
}

.cipages-about-tim-clan p {
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  min-height: 155px;
}

.cipages-about-tim-detalji {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cipages-about-tim-tag {
  background: rgba(106, 17, 203, 0.1);
  color: #6a11cb;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .cipages-about-put-sadrzaj,
  .cipages-about-misija-sadrzaj {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .cipages-about-put-vizual {
    order: -1;
  }
}

@media (max-width: 768px) {
  .cipages-about-put {
    padding: 3rem 0 2rem;
  }
  
  .cipages-about-put h1 {
    font-size: 2.2rem;
    min-height: 2.8rem;
  }
  
  .cipages-about-vremenska-linija:before {
    left: 30px;
  }
  
  .cipages-about-dogadaj-ikona {
    width: 60px;
    height: 60px;
  }
  
  .cipages-about-dogadaj-ikona .material-icons {
    font-size: 1.8rem;
  }
  
  .cipages-about-misija-blok {
    padding: 2.5rem;
  }
  
  .cipages-about-vrijednosti h2,
  .cipages-about-tim h2 {
    font-size: 2rem;
    min-height: 2.5rem;
  }
  
  .cipages-about-vrijednosti-lista,
  .cipages-about-tim-lista {
    grid-template-columns: 1fr;
  }
  
  .cipages-about-prednost {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .cipages-about-sadrzaj {
    padding: 0 0.5rem;
  }
  
  .cipages-about-put h1 {
    font-size: 1.8rem;
    min-height: 2.3rem;
  }
  
  .cipages-about-vremenska-linija:before {
    left: 25px;
  }

  .cipages-about-put-vizual {
    padding: 2rem 0.2rem;
  }

  .cipages-about-svg-animacija {
    width: 250px;
    height: 250px;
  }
  
  .cipages-about-dogadaj-ikona {
    width: 50px;
    height: 50px;
  }
  
  .cipages-about-dogadaj-ikona .material-icons {
    font-size: 1.5rem;
  }
  
  .cipages-about-misija-blok {
    padding: 2rem;
  }
  
  .cipages-about-vrijednosti h2,
  .cipages-about-tim h2 {
    font-size: 1.6rem;
    min-height: 2rem;
  }
  
  .cipages-about-vrijednost,
  .cipages-about-tim-clan {
    padding: 2rem;
  }
}

@media (max-width: 320px) {
  .cipages-about-sadrzaj {
    padding: 0 0.3rem;
  }
  
  .cipages-about-put,
  .cipages-about-misija,
  .cipages-about-vrijednosti,
  .cipages-about-tim {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
}

.cipages-responsible-sadrzaj {
  max-width: 1490px;
  margin: 2rem auto;
  padding: 0 1rem;
  background: var(--ci-bojanje-pozadina-sekundarni);
  border-radius: var(--ci-radijus-granice);
}

.cipages-responsible-omotac {
  max-width: 1200px;
  margin: 0 auto;
}

.cipages-responsible-hero {
  padding: 4rem 0 3rem;
  background: linear-gradient(135deg, rgba(106, 17, 203, 0.05) 0%, rgba(37, 117, 252, 0.05) 100%);
  border-radius: 25px;
  margin: 2rem 0;
}

.cipages-responsible-hero-sadrzaj {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.cipages-responsible-hero h1 {
  font-family: 'Alegreya SC', serif;
  font-size: 3rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-height: 3.5rem;
}

.cipages-responsible-hero-tekst p {
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  color: #4a5568;
  line-height: 1.7;
}

.cipages-responsible-statistika {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}

.cipages-responsible-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cipages-responsible-broj {
  font-size: 2rem;
  font-weight: 700;
  color: #6a11cb;
  margin-bottom: 0.5rem;
}

.cipages-responsible-opis {
  font-size: 0.9rem;
  color: #4a5568;
  font-weight: 500;
}

.cipages-responsible-hero-vizual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cipages-responsible-svg-animacija {
  width: 200px;
  height: 200px;
}

.cipages-responsible-savjeti {
  padding: 4rem 0;
}

.cipages-responsible-savjeti h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 3rem;
}

.cipages-responsible-podnaslov {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 1.1rem;
  color: #4a5568;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cipages-responsible-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.cipages-responsible-savjet {
  background: rgba(255, 255, 255, 0.9);
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

.cipages-responsible-savjet:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.cipages-responsible-savjet-ikona {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 1.5rem;
}

.cipages-responsible-savjet-ikona .material-icons {
  font-size: 2.2rem;
}

.cipages-responsible-savjet h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 2rem;
}

.cipages-responsible-savjet > p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: #4a5568;
  line-height: 1.6;
}

.cipages-responsible-lista {
  list-style: none;
  padding: 0;
}

.cipages-responsible-lista li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: #4a5568;
  line-height: 1.5;
}

.cipages-responsible-lista li:before {
  content: "•";
  color: #6a11cb;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.cipages-responsible-resursi {
  padding: 4rem 0;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.03) 0%, rgba(255, 167, 38, 0.03) 100%);
  border-radius: 25px;
  margin: 2rem 0;
}

.cipages-responsible-resursi h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 3rem;
}

.cipages-responsible-resursi-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.cipages-responsible-resurs {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.cipages-responsible-resurs:hover {
  transform: translateY(-3px);
}

.cipages-responsible-resurs-ikona {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: rgba(255, 107, 107, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6b6b;
}

.cipages-responsible-resurs-ikona .material-icons {
  font-size: 2rem;
}

.cipages-responsible-resurs-sadrzaj {
  flex: 1;
}

.cipages-responsible-resurs h3 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
  color: #2d3748;
  min-height: 1.8rem;
}

.cipages-responsible-resurs p {
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.cipages-responsible-poveznica {
  display: inline-block;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
  color: white;
  padding: 0.5rem 1.25rem;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.cipages-responsible-poveznica:hover {
  transform: scale(1.05);
}

.cipages-responsible-znakovi {
  padding: 4rem 0;
}

.cipages-responsible-znakovi h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 3rem;
}

.cipages-responsible-znakovi-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.cipages-responsible-znak {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255, 107, 107, 0.05);
  border-radius: 12px;
  border-left: 4px solid #ff6b6b;
}

.cipages-responsible-znak .material-icons {
  color: #ff6b6b;
  flex-shrink: 0;
}

.cipages-responsible-znak p {
  color: #4a5568;
  line-height: 1.5;
  font-weight: 500;
}

.cipages-responsible-poziv-akciji {
  text-align: center;
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(0, 176, 155, 0.05) 0%, rgba(150, 201, 61, 0.05) 100%);
  border-radius: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.cipages-responsible-poziv-akciji p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #4a5568;
  line-height: 1.7;
}

.cipages-responsible-kontakt-gumb {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.3s ease;
}

.cipages-responsible-kontakt-gumb:hover {
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .cipages-responsible-hero-sadrzaj {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .cipages-responsible-hero {
    padding: 3rem 0 2rem;
    margin: 1rem 0;
  }
  
  .cipages-responsible-hero h1 {
    font-size: 2.2rem;
    min-height: 2.8rem;
  }
  
  .cipages-responsible-statistika {
    justify-content: center;
    gap: 1.5rem;
  }
  
  .cipages-responsible-savjeti h2,
  .cipages-responsible-resursi h2,
  .cipages-responsible-znakovi h2 {
    font-size: 2rem;
    min-height: 2.5rem;
  }
  
  .cipages-responsible-mreza,
  .cipages-responsible-resursi-lista {
    grid-template-columns: 1fr;
  }
  
  .cipages-responsible-savjet,
  .cipages-responsible-resurs {
    padding: 2rem;
  }
  
  .cipages-responsible-resurs {
    flex-direction: column;
    text-align: center;
  }
  
  .cipages-responsible-znakovi-lista {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .cipages-responsible-sadrzaj {
    padding: 0 0.5rem;
  }
  
  .cipages-responsible-hero h1 {
    font-size: 1.8rem;
    min-height: 2.3rem;
  }
  
  .cipages-responsible-statistika {
    flex-direction: column;
    gap: 1rem;
  }
  
  .cipages-responsible-savjeti h2,
  .cipages-responsible-resursi h2,
  .cipages-responsible-znakovi h2 {
    font-size: 1.6rem;
    min-height: 2rem;
  }
  
  .cipages-responsible-savjet,
  .cipages-responsible-resurs {
    padding: 1.5rem;
  }
  
  .cipages-responsible-poziv-akciji {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 320px) {
  .cipages-responsible-sadrzaj {
    padding: 0 0.3rem;
  }
  
  .cipages-responsible-hero,
  .cipages-responsible-savjeti,
  .cipages-responsible-resursi,
  .cipages-responsible-znakovi {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
}

.cipages-cookie-sadrzaj {
  max-width: 1490px;
  margin: 2rem auto;
  padding: 0 1rem;
  background: var(--ci-bojanje-pozadina-sekundarni);
  border-radius: var(--ci-radijus-granice);
}

.cipages-cookie-uvod {
  padding: 4rem 0 2rem;
  text-align: center;
}

.cipages-cookie-omotac {
  max-width: 1200px;
  margin: 0 auto;
}

.cipages-cookie-uvod h1 {
  font-family: 'Alegreya SC', serif;
  font-size: 3rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-height: 3.5rem;
}

.cipages-cookie-uvod-tekst p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #4a5568;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.cipages-cookie-brzi-pregled {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(0, 176, 155, 0.1);
  padding: 1rem 1.5rem;
  border-radius: 50px;
  color: #00b09b;
  font-weight: 500;
}

.cipages-cookie-sekcije {
  padding: 2rem 0 5rem;
}

.cipages-cookie-stupac {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.cipages-cookie-kartica {
  background: rgba(255, 255, 255, 0.9);
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

.cipages-cookie-kartica:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.cipages-cookie-kartica-ikona {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 1.5rem;
}

.cipages-cookie-kartica-ikona .material-icons {
  font-size: 2.2rem;
}

.cipages-cookie-kartica h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 2.3rem;
}

.cipages-cookie-kartica > p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #4a5568;
  line-height: 1.6;
}

.cipages-cookie-podaci {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.cipages-cookie-cinjenica {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  flex: 1;
}

.cipages-cookie-cinjenica .material-icons {
  color: #00b09b;
  font-size: 2rem;
}

.cipages-cookie-cinjenica span:last-child {
  font-size: 0.9rem;
  color: #4a5568;
  font-weight: 500;
}

.cipages-cookie-vrste {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cipages-cookie-vrsta {
  padding: 1.5rem;
  background: rgba(247, 250, 252, 0.8);
  border-radius: 12px;
  border-left: 4px solid #00b09b;
}

.cipages-cookie-vrsta h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #2d3748;
  min-height: 1.6rem;
}

.cipages-cookie-vrsta p {
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.cipages-cookie-obavezno,
.cipages-cookie-izborno {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
}

.cipages-cookie-obavezno {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
}

.cipages-cookie-izborno {
  background: rgba(0, 176, 155, 0.1);
  color: #00b09b;
}

.cipages-cookie-trajanje {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cipages-cookie-period {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(247, 250, 252, 0.8);
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.cipages-cookie-period:hover {
  transform: translateX(5px);
}

.cipages-cookie-dani {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.cipages-cookie-period h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  color: #2d3748;
  min-height: 1.6rem;
}

.cipages-cookie-period p {
  color: #4a5568;
  line-height: 1.6;
  font-size: 0.95rem;
}

.cipages-cookie-trece-strane {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cipages-cookie-pružatelj {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(247, 250, 252, 0.8);
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

.cipages-cookie-pružatelj:hover {
  background: rgba(0, 176, 155, 0.05);
}

.cipages-cookie-pružatelj-ikona {
  width: 50px;
  height: 50px;
  background: rgba(0, 176, 155, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00b09b;
  flex-shrink: 0;
}

.cipages-cookie-pružatelj h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  color: #2d3748;
  min-height: 1.6rem;
}

.cipages-cookie-pružatelj p {
  color: #4a5568;
  line-height: 1.6;
  font-size: 0.95rem;
}

.cipages-cookie-upravljanje {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cipages-cookie-metoda {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(247, 250, 252, 0.8);
  border-radius: 12px;
}

.cipages-cookie-metoda .material-icons {
  color: #00b09b;
  font-size: 2rem;
  flex-shrink: 0;
}

.cipages-cookie-metoda h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  color: #2d3748;
  min-height: 1.6rem;
}

.cipages-cookie-metoda p {
  color: #4a5568;
  line-height: 1.6;
  font-size: 0.95rem;
}

.cipages-cookie-svrha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.cipages-cookie-cilj {
  padding: 1.5rem;
  background: rgba(247, 250, 252, 0.8);
  border-radius: 12px;
  text-align: center;
}

.cipages-cookie-cilj h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: #2d3748;
  min-height: 1.5rem;
}

.cipages-cookie-cilj p {
  color: #4a5568;
  line-height: 1.6;
  font-size: 0.9rem;
}

.cipages-cookie-puna-sirina {
  grid-column: 1 / -1;
}

.cipages-cookie-kontakt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.cipages-cookie-kontakt-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(247, 250, 252, 0.8);
  border-radius: 12px;
}

.cipages-cookie-kontakt-info .material-icons {
  color: #00b09b;
  font-size: 2rem;
  flex-shrink: 0;
}

.cipages-cookie-kontakt-info h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  color: #2d3748;
  min-height: 1.6rem;
}

.cipages-cookie-kontakt-info p {
  color: #4a5568;
  line-height: 1.6;
  font-size: 0.95rem;
}

.cipages-cookie-kontakt-info a {
  color: #00b09b;
  text-decoration: none;
  font-weight: 500;
}

.cipages-cookie-kontakt-info a:hover {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .cipages-cookie-stupac {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .cipages-cookie-uvod {
    padding: 3rem 0 1rem;
  }
  
  .cipages-cookie-uvod h1 {
    font-size: 2.2rem;
    min-height: 2.8rem;
  }
  
  .cipages-cookie-kartica {
    padding: 2rem;
  }
  
  .cipages-cookie-podaci {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .cipages-cookie-period {
    flex-direction: column;
    text-align: center;
  }
  
  .cipages-cookie-pružatelj {
    flex-direction: column;
    text-align: center;
  }
  
  .cipages-cookie-metoda {
    flex-direction: column;
    text-align: center;
  }
  
  .cipages-cookie-kontakt-info {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .cipages-cookie-sadrzaj {
    padding: 0 0.5rem;
  }
  
  .cipages-cookie-uvod h1 {
    font-size: 1.8rem;
    min-height: 2.3rem;
  }
  
  .cipages-cookie-kartica h2 {
    font-size: 1.5rem;
    min-height: 2rem;
  }
  
  .cipages-cookie-kartica {
    padding: 1.5rem;
  }
  
  .cipages-cookie-svrha {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 320px) {
  .cipages-cookie-sadrzaj {
    padding: 0 0.3rem;
  }
  
  .cipages-cookie-uvod,
  .cipages-cookie-sekcije {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
  
  .cipages-cookie-kartica {
    padding: 1rem;
  }
}

.cipages-terms-sadrzaj {
  max-width: 1490px;
  margin: 2rem auto;
  padding: 0 1rem;
  background: var(--ci-bojanje-pozadina-sekundarni);
  border-radius: var(--ci-radijus-granice);
}

.cipages-terms-uvod {
  padding: 4rem 0 2rem;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.05) 0%, rgba(255, 167, 38, 0.05) 100%);
  border-radius: 20px;
  margin: 2rem 0;
}

.cipages-terms-omotac {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.cipages-terms-uvod h1 {
  font-family: 'Alegreya SC', serif;
  font-size: 3rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-height: 3.5rem;
  text-align: center;
}

.cipages-terms-uvod-tekst p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #4a5568;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 1.7;
}

.cipages-terms-obavijest {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 107, 107, 0.1);
  padding: 1rem 1.5rem;
  border-radius: 50px;
  color: #ff6b6b;
  font-weight: 500;
}

.cipages-terms-sekcije {
  padding: 2rem 0 5rem;
}

.cipages-terms-blok {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.cipages-terms-blok:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.cipages-terms-blok-ikona {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.cipages-terms-blok-ikona .material-icons {
  font-size: 2.2rem;
}

.cipages-terms-blok-sadrzaj {
  flex: 1;
}

.cipages-terms-blok-sadrzaj h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 2.5rem;
}

.cipages-terms-blok-sadrzaj > p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #4a5568;
  line-height: 1.6;
}

.cipages-terms-detalji {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.cipages-terms-točka {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(247, 250, 252, 0.8);
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

.cipages-terms-točka:hover {
  background: rgba(255, 107, 107, 0.05);
}

.cipages-terms-točka .material-icons {
  color: #ff6b6b;
  font-size: 1.8rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.cipages-terms-točka h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #2d3748;
  min-height: 1.6rem;
}

.cipages-terms-točka p {
  color: #4a5568;
  line-height: 1.6;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .cipages-terms-uvod {
    padding: 3rem 0 1rem;
    margin: 1rem 0;
  }
  
  .cipages-terms-omotac {
    padding: 0 1rem;
  }
  
  .cipages-terms-uvod h1 {
    font-size: 2.2rem;
    min-height: 2.8rem;
  }
  
  .cipages-terms-blok {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
    padding: 2rem;
  }
  
  .cipages-terms-blok-ikona {
    align-self: center;
  }
  
  .cipages-terms-detalji {
    grid-template-columns: 1fr;
  }
  
  .cipages-terms-točka {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .cipages-terms-sadrzaj {
    padding: 0 0.5rem;
  }
  
  .cipages-terms-uvod h1 {
    font-size: 1.8rem;
    min-height: 2.3rem;
  }
  
  .cipages-terms-blok-sadrzaj h2 {
    font-size: 1.6rem;
    min-height: 2rem;
  }
  
  .cipages-terms-blok {
    padding: 1.5rem;
  }
  
  .cipages-terms-točka {
    padding: 1rem;
  }
}

@media (max-width: 320px) {
  .cipages-terms-sadrzaj {
    padding: 0 0.3rem;
  }
  
  .cipages-terms-uvod,
  .cipages-terms-sekcije {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
}

.cipages-privacy-sadrzaj {
  max-width: 1490px;
  margin: 2rem auto;
  padding: 0 1rem;
  background: var(--ci-bojanje-pozadina-sekundarni);
  border-radius: var(--ci-radijus-granice);
}

.cipages-privacy-uvod {
  padding: 4rem 0 2rem;
  text-align: center;
}

.cipages-privacy-omotac {
  max-width: 1200px;
  margin: 0 auto;
}

.cipages-privacy-uvod h1 {
  font-family: 'Alegreya SC', serif;
  font-size: 3rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-height: 3.5rem;
}

.cipages-privacy-uvod-tekst p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #4a5568;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.cipages-privacy-brzi-pregled {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(106, 17, 203, 0.1);
  padding: 1rem 1.5rem;
  border-radius: 50px;
  color: #6a11cb;
  font-weight: 500;
}

.cipages-privacy-sekcije {
  padding: 2rem 0 5rem;
}

.cipages-privacy-stapic {
  display: flex;
  gap: 2rem;
  margin-bottom: 4rem;
  align-items: flex-start;
}

.cipages-privacy-stapic-ikona {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.cipages-privacy-stapic-ikona .material-icons {
  font-size: 2.5rem;
}

.cipages-privacy-stapic-sadrzaj {
  flex: 1;
}

.cipages-privacy-stapic-sadrzaj h2 {
  font-family: 'Alegreya SC', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #2d3748;
  min-height: 2.5rem;
}

.cipages-privacy-stapic-sadrzaj > p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #4a5568;
  line-height: 1.6;
}

.cipages-privacy-lista {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cipages-privacy-stavka {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(247, 250, 252, 0.8);
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cipages-privacy-stavka:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.cipages-privacy-stavka .material-icons {
  color: #6a11cb;
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.cipages-privacy-stavka h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #2d3748;
  min-height: 1.8rem;
}

.cipages-privacy-stavka p {
  color: #4a5568;
  line-height: 1.6;
}

.cipages-privacy-stavka a {
  color: #2575fc;
  text-decoration: none;
  font-weight: 500;
}

.cipages-privacy-stavka a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .cipages-privacy-uvod {
    padding: 3rem 0 1rem;
  }
  
  .cipages-privacy-uvod h1 {
    font-size: 2.2rem;
    min-height: 2.8rem;
  }
  
  .cipages-privacy-stapic {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  
  .cipages-privacy-stapic-ikona {
    align-self: center;
  }
  
  .cipages-privacy-stavka {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .cipages-privacy-sadrzaj {
    padding: 0 0.5rem;
  }
  
  .cipages-privacy-uvod h1 {
    font-size: 1.8rem;
    min-height: 2.3rem;
  }
  
  .cipages-privacy-stapic-sadrzaj h2 {
    font-size: 1.6rem;
    min-height: 2rem;
  }
  
  .cipages-privacy-stavka {
    padding: 1rem;
  }
}

@media (max-width: 320px) {
  .cipages-privacy-sadrzaj {
    padding: 0 0.3rem;
  }
  
  .cipages-privacy-uvod,
  .cipages-privacy-sekcije {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
}