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

:root {
--primary: #6b3f5d;
--primary-dark: #4d2c43;
--secondary: #b9829f;
--accent: #d8a9bd;
--light: #f8f2f6;
--lighter: #fcf9fb;
--text: #45424a;
--muted: #716c74;
--white: #ffffff;
--border: #eadfe6;
}

body {
font-family: Arial, Helvetica, sans-serif;
color: var(--text);
background: var(--white);
line-height: 1.7;
}

/* =========================
NAVIGACIJA
========================= */

header {
background: var(--white);
border-bottom: 1px solid var(--border);
padding: 18px 5%;
}

nav {
max-width: 1200px;
margin: 0 auto;
min-height: 38px;


display: flex;
align-items: center;
justify-content: center;

position: relative;


}

/* LOGO */

.logo {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);


color: var(--primary);
font-size: 1.45rem;
font-weight: 700;
letter-spacing: 0.4px;


}

/* GLAVNI IZBORNIK */

nav ul {
list-style: none;


display: flex;
align-items: center;
justify-content: center;

gap: 24px;
flex-wrap: wrap;

margin: 0;
padding: 0;


}

nav ul li {
margin: 0;
padding: 0;
}

nav ul li a {
color: var(--text);
text-decoration: none;


font-family: Arial, Helvetica, sans-serif;
font-size: 0.95rem;
font-weight: 400;

transition: color 0.2s ease;


}

nav ul li a:hover {
color: var(--primary);
}

/* =========================
HR / EN
========================= */

.language-switch {
position: absolute;


right: 0;
top: 50%;

transform: translateY(-50%);

display: flex;
align-items: center;

gap: 8px;

margin: 0;
padding: 0;

white-space: nowrap;


}

.language-switch a {
color: var(--text);


text-decoration: none;

font-family: Arial, Helvetica, sans-serif;
font-size: 0.85rem;
font-weight: 700;

line-height: 1;

transition: color 0.2s ease;


}

.language-switch a:hover {
color: var(--primary);
}

.language-switch .active {
color: var(--primary);
}

.language-divider {
color: var(--border);


font-family: Arial, Helvetica, sans-serif;
font-size: 0.85rem;


}

/* =========================
GLAVNI SADRŽAJ
========================= */

main {
max-width: 1100px;
margin: 0 auto;
padding: 70px 30px;
}

h1 {
color: var(--primary-dark);


font-size: 2.7rem;
line-height: 1.2;

margin-bottom: 30px;


}

h2 {
color: var(--primary);


font-size: 1.7rem;

margin-top: 45px;
margin-bottom: 18px;


}

h3 {
color: var(--primary-dark);
line-height: 1.35;
}

p {
margin-bottom: 18px;
}

/* =========================
POČETNA
========================= */

.hero {
background:
linear-gradient(
135deg,
var(--light) 0%,
var(--lighter) 55%,
#ffffff 100%
);


padding: 85px 30px;

text-align: center;


}

.hero-content {
max-width: 1000px;
margin: auto;
}

.project-logo {
display: block;


width: 280px;
max-width: 75%;

height: auto;

margin: 0 auto 35px auto;


}

.hero h1 {
max-width: 950px;


margin: 0 auto 25px auto;

color: var(--primary-dark);

font-size: 2.65rem;


}

.hero p {
max-width: 850px;


margin: 0 auto;

font-size: 1.12rem;

color: var(--muted);


}

/* =========================
GUMBI
========================= */

.button {
display: inline-block;


margin-top: 25px;

padding: 12px 26px;

background: var(--primary);
color: white;

text-decoration: none;

border-radius: 6px;

transition: all 0.2s ease;


}

.button:hover {
background: var(--primary-dark);


transform: translateY(-1px);


}

/* =========================
SEKCIJE
========================= */

.intro {
background: white;


padding: 65px 30px;


}

.section-content {
max-width: 1100px;


margin: auto;


}

.section-title {
color: var(--primary-dark);


text-align: center;

margin-bottom: 25px;


}

.intro p {
max-width: 850px;


margin-left: auto;
margin-right: auto;


}

.highlight {
background: var(--light);


border-left: 5px solid var(--secondary);

padding: 25px 30px;

margin: 30px 0;

border-radius: 0 6px 6px 0;


}

/* =========================
KARTICE
========================= */

.cards {
display: grid;


grid-template-columns: repeat(3, 1fr);

gap: 25px;

margin-top: 35px;


}

.card {
background: var(--white);


padding: 30px;

border: 1px solid var(--border);

border-radius: 9px;

box-shadow:
    0 5px 18px rgba(75, 50, 65, 0.07);


}

.card h3 {
color: var(--primary);


margin-bottom: 15px;


}

/* =========================
INFORMACIJE O PROJEKTU
========================= */

.project-info {
background: var(--light);


padding: 55px 30px;


}

.project-info-grid {
max-width: 950px;


margin: 30px auto 0 auto;

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 20px;


}

.info-box {
background: white;


border: 1px solid var(--border);

padding: 24px;

border-radius: 8px;


}

.info-box strong {
display: block;


color: var(--primary);

margin-bottom: 7px;


}

/* =========================
FINANCIRANJE
========================= */

.funding {
background: var(--primary-dark);


color: white;

padding: 60px 30px;

text-align: center;


}

.funding h2 {
color: white;


margin-top: 0;


}

.funding p {
color: #f7edf3;
}

.funding-logos {
display: flex;


justify-content: center;
align-items: center;

margin-top: 25px;


}

.funding-logos img {
width: 310px;


max-width: 90%;

height: auto;


}

/* =========================
PODNOŽJE
========================= */

footer {
background: #33252f;


color: white;

text-align: center;

padding: 32px 20px;


}

footer p {
margin-bottom: 5px;
}

/* =========================
MOBITEL
========================= */

@media (max-width: 800px) {


header {
    padding: 18px 25px;
}

nav {
    flex-direction: column;

    min-height: auto;

    gap: 12px;

    position: relative;
}

.logo {
    position: static;

    transform: none;
}

nav ul {
    justify-content: center;

    gap: 14px;
}

.language-switch {
    position: static;

    transform: none;

    margin: 0;

    justify-content: center;
}

main {
    padding: 50px 22px;
}

.hero {
    padding: 55px 22px;
}

.hero h1 {
    font-size: 2rem;
}

.project-logo {
    width: 220px;
}

.cards {
    grid-template-columns: 1fr;
}

.project-info-grid {
    grid-template-columns: 1fr;
}

h1 {
    font-size: 2.1rem;
}


}