/* ========================================== 
   RESET I OSNOVNE POSTAVKE 
========================================== */

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

/* Osnovna stilizacija body elementa */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f3f5f4;
    color: #2f2f2f;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Stilizacija naslova */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
    color: #2f2f2f;
}

/* Linkovi bez podvlake */
a {
    text-decoration: none;
}

/* Lista bez točkica */
ul {
    list-style: none;
}

/* Responzivne slike */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===========================
   ZAGLAVLJE (HEADER)
============================== */

/* Glavni kontejner zaglavlja */
.zaglavlje {
    background-color: #6fb24a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    width: 100%;
    position: relative;
}

/* Unutarnji dio zaglavlja */
.zaglavlje-unutarnje {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 20px;
}

/* LOGO SEKCIJA */
.zaglavlje-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px 0;
    text-decoration: none;
}

.logo-slika {
    width: 100px;
    display: flex;
    justify-content: center;
}

.logo-slika img {
    width: 100%;
    height: auto;
    display: block;
}

.logo-tekst {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-naziv {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    color: #ffffff;
    margin-left: 10px;
    text-align: center;
}

/* NAVIGACIJA SEKCIJA */
.zaglavlje-navigacija {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.navigacija-popis {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

/* Pojedini navigacijski element */
.navigacija-stavka {
    margin: 5px 10px;
}

.navigacija-link {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    padding: 8px 10px;
    border-bottom: 3px solid transparent;
    display: inline-block;
}

.navigacija-link:hover {
    border-bottom: 3px solid #ffffff;
}

/* ========================================== 
   HERO SEKCIJA - SLIKA KAO POZADINA 
========================================== */

/* Glavni hero kontejner - slika kao background */
.hero {
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    background-image: url('../img/hero.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    min-height: 600px;
}

/* Unutarnji dio hero sekcije */
.hero-unutarnji {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Hero slika div - sakrivam jer koristim background */
.hero-slika {
    display: none;
    visibility: hidden;
}

/* Hero tekst - preko pozadinske slike */
.hero-tekst {
    position: relative;
    max-width: 1000px;
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/* Hero naslov - veliki bijeli tekst */
.hero-naslov {
    font-size: 56px;
    color: #ffffff;
    margin: 0 0 40px 0;
    line-height: 1.2;
    font-weight: 800;
    text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5);
}

/* ========================================== 
   GUMBI (BUTTONS) 
========================================== */

/* Osnovni stil gumba */
.gumb {
    display: inline-block;
    padding: 16px 40px;
    background-color: #6fb24a;
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
}

/* Hover efekat */
.gumb:hover {
    background-color: #5a9d36;
    color: #ffffff;
}

/* Hero gumb */
.gumb-hero {
    padding: 18px 45px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.gumb-hero:hover {
    background-color: #5a9d36;
    color: #ffffff;
}

/* ========================================== 
   UVOD SEKCIJA 
========================================== */

.uvod {
    padding: 70px 40px;
    background-color: #ffffff;
    margin: 0;
}

.uvod-unutarnji {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Naslov uvoda */
.uvod-naslov {
    font-size: 38px;
    color: #2f2f2f;
    margin: 0 0 25px 0;
    text-align: center;
    font-weight: 800;
}

/* Tekst uvoda */
.uvod-tekst {
    font-size: 19px;
    color: #2f2f2f;
    text-align: center;
    line-height: 1.8;
}

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

/* Kontejner za sve kartice */
.kartice {
    padding: 70px 40px 90px 40px;
    background-color: #f3f5f4;
}

.kartice-unutarnje {
    max-width: 1450px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

/* Pojedinačna kartica */
.kartica {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin: 12px;
    padding: 35px 20px;
    flex: 1 1 220px;
    min-width: 220px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hover efekat - podigni karticu */
.kartica:hover {
    box-shadow: 0 8px 25px rgba(111, 178, 74, 0.25);
}

/* Slika na kartici */
.kartica-slika {
    width: 100%;
    max-width: 250px;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kartica-slika img {
    width: 100%;
}

/* Sadržaj kartice */
.kartica-sadrzaj {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 25px 0;
    flex: 1 0 auto;
}

/* Naslov kartice */
.kartica-naslov {
    font-size: 26px;
    color: #2f2f2f;
    margin: 0 0 10px 0;
    font-weight: 700;
}

/* Opis kartice */
.kartica-opis {
    font-size: 18px;
    color: #2f2f2f;
    text-align: center;
    line-height: 1.5;
}

/* Akcija na kartici */
.kartica-akcija {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kartica-akcija .gumb {
    background-color: #6fb24a;
    color: #ffffff;
    width: 100%;
    max-width: 170px;
    text-align: center;
    font-size: 17px;
    padding: 12px 25px;
    font-weight: 600;
}

.kartica-akcija .gumb:hover {
    background-color: #5a9d36;
    color: #ffffff;
}

/* ========================================== 
   PODNOŽJE (FOOTER) 
========================================== */

.podnozje {
    background-color: #2f2f2f;
    padding: 30px 40px;
    margin: 0;
}

.podnozje-unutarnje {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Tekst u podnožju */
.podnozje-tekst {
    font-size: 18px;
    color: #ffffff;
    text-align: center;
}

/* ========================================== 
   RESPONZIVNOST SA FLEXBOXOM 
========================================== */

/* Hero se prilagođava automatski */
.hero-unutarnji {
    min-height: 500px;
}

/* ========================================== 
   DODATNE POMOĆNE KLASE 
========================================== */

/* Sakrivanje elemenata */
.sakriven {
    visibility: hidden;
}

/* Centriranje teksta */
.tekst-centar {
    text-align: center;
}

/* ============================================
   BMI KALKULATOR STRANICA
   ============================================ */

/* Naslovna sekcija */
.bmi-uvod {
    background-color: #ffffff;
    padding: 35px 40px;
}

.bmi-uvod-unutarnji {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.bmi-tekst-dio {
    width: 100%;
}

.bmi-naslov {
    font-family: 'Poppins', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 12px 0;
}

.bmi-opis {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0;
    line-height: 1.8;
}

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

.bmi-sadrzaj {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 40px;
}

/* ============================================
   FORMA
   ============================================ */

.bmi-forma {
    background-color: #ffffff;
    padding: 30px;
    margin: 0 auto 30px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.bmi-forma-polje {
    margin: 0 0 20px 0;
}

.bmi-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2f2f2f;
    margin: 0 0 8px 0;
}

.bmi-input {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Afacad Flux', sans-serif;
    font-size: 19px;
    color: #2f2f2f;
    background-color: #f3f5f4;
    border: 2px solid #f3f5f4;
    border-radius: 5px;
}

.bmi-input:focus {
    outline: none;
    border: 2px solid #6fb24a;
    background-color: #ffffff;
}

.bmi-forma-gumb {
    margin: 25px 0 0 0;
}

.bmi-gumb {
    width: 100%;
    padding: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    background-color: #6fb24a;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.bmi-gumb:hover {
    background-color: #5a9d36;
}

/* ============================================
   REZULTAT
   ============================================ */

.bmi-rezultat {
    background-color: #6fb24a;
    padding: 30px;
    margin: 0 auto 40px auto;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(111, 178, 74, 0.25);
}

.bmi-broj-kontejner {
    background-color: #ffffff;
    padding: 25px;
    margin: 0 0 20px 0;
    border-radius: 5px;
}

.bmi-broj {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0 0 12px 0;
    text-align: center;
}

.bmi-vrijednost {
    font-size: 48px;
    font-weight: 800;
    color: #6fb24a;
    display: block;
    margin: 10px 0;
}

.bmi-kategorija {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0;
    text-align: center;
}

.bmi-kat-tekst {
    font-weight: 700;
    color: #6fb24a;
}

.bmi-tekst {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

/* ============================================
   INFORMACIJSKA SEKCIJA
   ============================================ */

.bmi-info {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 40px;
}

.bmi-info-naslov {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 15px 0;
    text-align: left;
}

.bmi-info-tekst {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    line-height: 1.6;
    margin: 0 0 30px 0;
    text-align: justify;
}

/* ============================================
   TABLICA
   ============================================ */

.bmi-tablica-wrapper {
    width: 100%;
    overflow-x: auto;
}

.bmi-tablica {
    width: 100%;
    min-width: 600px;
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.bmi-tablica thead {
    background-color: #6fb24a;
}

.bmi-tablica th {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    padding: 18px 20px;
    text-align: left;
}

.bmi-tablica td {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    padding: 16px 20px;
}

/* Naizmjenične boje */
.bmi-tablica tbody tr:nth-child(odd) {
    background-color: #f3f5f4;
}

.bmi-tablica tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* ============================================
   OBJAŠNJENJE
   ============================================ */

.bmi-objasnjenje {
    max-width: 700px;
    margin: 40px auto 70px auto;
    padding: 0 40px;
    background-color: #f3f5f4;
    border-radius: 8px;
}

.objasnjenje-naslov {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 20px 0;
    text-align: left;
}

.objasnjenje-tekst {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    text-align: justify;
    color: #2f2f2f;
    line-height: 1.6;
    margin: 0 0 18px 0;
}

.objasnjenje-formula,
.objasnjenje-primjer {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 22px;
    color: #2f2f2f;
    line-height: 1.7;
    margin: 0 0 18px 0;
    padding: 18px;
    background-color: #ffffff;
    border-radius: 5px;
    text-align: justify;
}

/* ============================================
   BMR KALKULATOR STRANICA
   ============================================ */

/* Naslovna sekcija */
.bmr-uvod {
    background-color: #ffffff;
    padding: 35px 40px;
}

.bmr-uvod-unutarnji {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.bmr-tekst-dio {
    width: 100%;
}

.bmr-naslov {
    font-family: 'Poppins', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 12px 0;
}

.bmr-opis {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0;
    line-height: 1.8;
}

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

.bmr-sadrzaj {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 40px;
}

/* ============================================
   FORMA
   ============================================ */

.bmr-forma {
    background-color: #ffffff;
    padding: 30px;
    margin: 0 auto 30px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.bmr-forma-polje {
    margin: 0 0 20px 0;
}

.bmr-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2f2f2f;
    margin: 0 0 8px 0;
}

.bmr-input {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Afacad Flux', sans-serif;
    font-size: 19px;
    color: #2f2f2f;
    background-color: #f3f5f4;
    border: 2px solid #f3f5f4;
    border-radius: 5px;
}

.bmr-input:focus {
    outline: none;
    border: 2px solid #6fb24a;
    background-color: #ffffff;
}

.bmr-select {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Afacad Flux', sans-serif;
    font-size: 19px;
    color: #2f2f2f;
    background-color: #f3f5f4;
    border: 2px solid #f3f5f4;
    border-radius: 5px;
    cursor: pointer;
}

.bmr-select:focus {
    outline: none;
    border: 2px solid #6fb24a;
    background-color: #ffffff;
}

.bmr-forma-gumb {
    margin: 25px 0 0 0;
}

.bmr-gumb {
    width: 100%;
    padding: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    background-color: #6fb24a;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.bmr-gumb:hover {
    background-color: #5a9d36;
}

/* ============================================
   REZULTAT
   ============================================ */

.bmr-rezultat {
    background-color: #6fb24a;
    padding: 30px;
    margin: 0 auto 40px auto;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(111, 178, 74, 0.25);
}

.bmr-broj-kontejner {
    background-color: #ffffff;
    padding: 25px;
    margin: 0 0 20px 0;
    border-radius: 5px;
}

.bmr-broj {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0;
    text-align: center;
}

.bmr-vrijednost {
    font-size: 48px;
    font-weight: 800;
    color: #6fb24a;
    display: block;
    margin: 10px 0;
}

.bmr-tekst {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

/* ============================================
   INFORMACIJSKA SEKCIJA
   ============================================ */

.bmr-info {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 40px;
}

.bmr-info-naslov {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 15px 0;
    text-align: left;
}

.bmr-info-tekst {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    line-height: 1.6;
    margin: 0 0 30px 0;
    text-align: justify;
}

/* ============================================
   TABLICA
   ============================================ */

.bmr-tablica-wrapper {
    width: 100%;
    overflow-x: auto;
}

.bmr-tablica {
    width: 100%;
    min-width: 600px;
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.bmr-tablica thead {
    background-color: #6fb24a;
}

.bmr-tablica th {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    padding: 18px 20px;
    text-align: left;
}

.bmr-tablica td {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    padding: 16px 20px;
}

/* Naizmjenične boje */
.bmr-tablica tbody tr:nth-child(odd) {
    background-color: #f3f5f4;
}

.bmr-tablica tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* ============================================
   OBJAŠNJENJE
   ============================================ */

.bmr-objasnjenje {
    max-width: 700px;
    margin: 40px auto 70px auto;
    padding: 0 40px;
    background-color: #f3f5f4;
    border-radius: 8px;
}

/* ============================================
   KCAL KALKULATOR STRANICA
   ============================================ */

/* Naslovna sekcija */
.kcal-uvod {
    background-color: #ffffff;
    padding: 35px 40px;
}

.kcal-uvod-unutarnji {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.kcal-tekst-dio {
    width: 100%;
}

.kcal-naslov {
    font-family: 'Poppins', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 12px 0;
}

.kcal-opis {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0;
    line-height: 1.8;
}

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

.kcal-sadrzaj {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 40px;
}

/* ============================================
   FORMA
   ============================================ */

.kcal-forma {
    background-color: #ffffff;
    padding: 30px;
    margin: 0 auto 30px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.kcal-forma-polje {
    margin: 0 0 20px 0;
}

.kcal-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2f2f2f;
    margin: 0 0 8px 0;
}

.kcal-input {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Afacad Flux', sans-serif;
    font-size: 19px;
    color: #2f2f2f;
    background-color: #f3f5f4;
    border: 2px solid #f3f5f4;
    border-radius: 5px;
}

.kcal-input:focus {
    outline: none;
    border: 2px solid #6fb24a;
    background-color: #ffffff;
}

.kcal-select {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Afacad Flux', sans-serif;
    font-size: 19px;
    color: #2f2f2f;
    background-color: #f3f5f4;
    border: 2px solid #f3f5f4;
    border-radius: 5px;
    cursor: pointer;
}

.kcal-select:focus {
    outline: none;
    border: 2px solid #6fb24a;
    background-color: #ffffff;
}

.kcal-forma-gumb {
    margin: 25px 0 0 0;
}

.kcal-gumb {
    width: 100%;
    padding: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    background-color: #6fb24a;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.kcal-gumb:hover {
    background-color: #5a9d36;
}

/* ============================================
   REZULTAT
   ============================================ */

.kcal-rezultat {
    background-color: #6fb24a;
    padding: 30px;
    margin: 0 auto 40px auto;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(111, 178, 74, 0.25);
}

.kcal-broj-kontejner {
    background-color: #ffffff;
    padding: 25px;
    margin: 0 0 20px 0;
    border-radius: 5px;
}

.kcal-broj {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0;
    text-align: center;
}

.kcal-vrijednost {
    font-size: 48px;
    font-weight: 800;
    color: #6fb24a;
    display: block;
    margin: 10px 0;
}

.kcal-tekst {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    margin: 0 0 25px 0;
    text-align: justify;
}

/* ============================================
   CILJEVI (DEFICIT, ODRŽAVANJE, SUFICIT)
   ============================================ */

.kcal-ciljevi-red {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
    width: 100%;
}

.kcal-cilj-blok {
    flex: 1 1 150px;
    min-width: 150px;
    max-width: 250px;
    background-color: #ffffff;
    padding: 16px 10px;
    border-radius: 5px;
    text-align: center;
    margin: 6px;
}

.cilj-naziv {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2f2f2f;
    margin: 0 0 8px 0;
}

.cilj-broj {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #6fb24a;
    margin: 0;
}

.kcal-napomena {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    margin: 20px 0 0 0;
    text-align: center;
}

/* ============================================
   INFORMACIJSKA SEKCIJA
   ============================================ */

.kcal-info {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 40px;
}

.kcal-info-naslov {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 15px 0;
    text-align: left;
}

.kcal-info-tekst {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    line-height: 1.6;
    margin: 0 0 30px 0;
    text-align: justify;
}

/* ============================================
   TABLICA
   ============================================ */

.kcal-tablica-wrapper {
    width: 100%;
    overflow-x: auto;
}

.kcal-tablica {
    width: 100%;
    min-width: 600px;
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    text-align: left;
}

.kcal-tablica thead {
    background-color: #6fb24a;
}

.kcal-tablica th {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    padding: 18px 20px;
}

.kcal-tablica td {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    padding: 16px 20px;
}

/* Naizmjenične boje */
.kcal-tablica tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.kcal-tablica tbody tr:nth-child(even) {
    background-color: #f3f5f4;
}

/* ============================================
   OBJAŠNJENJE
   ============================================ */

.kcal-objasnjenje {
    max-width: 700px;
    margin: 40px auto 70px auto;
    padding: 0 40px;
    background-color: #f3f5f4;
    border-radius: 8px;
}

.objasnjenje-podnaslov {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #2f2f2f;
    margin: 25px 0 12px 0;
    text-align: left;
}

/* ============================================
   VODA KALKULATOR STRANICA
   ============================================ */

/* Naslovna sekcija */
.voda-uvod {
    background-color: #ffffff;
    padding: 35px 40px;
}

.voda-uvod-unutarnji {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.voda-tekst-dio {
    width: 100%;
}

.voda-naslov {
    font-family: 'Poppins', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 12px 0;
}

.voda-opis {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0;
    line-height: 1.8;
}

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

.voda-sadrzaj {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 40px;
}

/* ============================================
   FORMA
   ============================================ */

.voda-forma {
    background-color: #ffffff;
    padding: 30px;
    margin: 0 auto 30px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.voda-forma-polje {
    margin: 0 0 20px 0;
}

.voda-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2f2f2f;
    margin: 0 0 8px 0;
}

.voda-input {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Afacad Flux', sans-serif;
    font-size: 19px;
    color: #2f2f2f;
    background-color: #f3f5f4;
    border: 2px solid #f3f5f4;
    border-radius: 5px;
}

.voda-input:focus {
    outline: none;
    border: 2px solid #6fb24a;
    background-color: #ffffff;
}

.voda-napomena {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 17px;
    color: #2f2f2f;
    margin: 8px 0 0 0;
    line-height: 1.5;
    text-align: justify;
}

.voda-forma-gumb {
    margin: 25px 0 0 0;
}

.voda-gumb {
    width: 100%;
    padding: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    background-color: #6fb24a;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.voda-gumb:hover {
    background-color: #5a9d36;
}

/* ============================================
   REZULTAT
   ============================================ */

.voda-rezultat {
    background-color: #6fb24a;
    padding: 30px;
    margin: 0 auto 40px auto;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(111, 178, 74, 0.25);
}

.voda-broj-kontejner {
    background-color: #ffffff;
    padding: 25px;
    margin: 0 0 20px 0;
    border-radius: 5px;
}

.voda-broj {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0 0 12px 0;
    text-align: center;
}

.voda-vrijednost {
    font-size: 48px;
    font-weight: 800;
    color: #6fb24a;
    display: block;
    margin: 10px 0;
}

.voda-case-tekst {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0;
    text-align: center;
}

.voda-case-broj {
    font-weight: 700;
    color: #6fb24a;
}

.voda-tekst {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

/* ============================================
   INFORMACIJSKA SEKCIJA
   ============================================ */

.voda-info {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 40px;
}

.voda-info-naslov {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 15px 0;
    text-align: left;
}

.voda-info-tekst {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    line-height: 1.6;
    margin: 0 0 30px 0;
    text-align: justify;
}

/* ============================================
   TABLICA
   ============================================ */

.voda-tablica-wrapper {
    width: 100%;
    overflow-x: auto;
}

.voda-tablica {
    width: 100%;
    min-width: 600px;
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.voda-tablica thead {
    background-color: #6fb24a;
}

.voda-tablica th {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    padding: 18px 20px;
    text-align: left;
}

.voda-tablica td {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    padding: 16px 20px;
}

/* Naizmjenične boje */
.voda-tablica tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.voda-tablica tbody tr:nth-child(even) {
    background-color: #f3f5f4;
}

/* ============================================
   OBJAŠNJENJE
   ============================================ */

.voda-objasnjenje {
    max-width: 700px;
    margin: 40px auto 70px auto;
    padding: 0 40px;
    background-color: #f3f5f4;
    border-radius: 8px;
}

/* ============================================
   PULS KALKULATOR STRANICA
   ============================================ */

/* Naslovna sekcija */
.puls-uvod {
    background-color: #ffffff;
    padding: 35px 40px;
}

.puls-uvod-unutarnji {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.puls-tekst-dio {
    width: 100%;
}

.puls-naslov {
    font-family: 'Poppins', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 12px 0;
}

.puls-opis {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0;
    line-height: 1.8;
}

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

.puls-sadrzaj {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 40px;
}

/* ============================================
   FORMA
   ============================================ */

.puls-forma {
    background-color: #ffffff;
    padding: 30px;
    margin: 0 auto 30px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.puls-forma-polje {
    margin: 0 0 20px 0;
}

.puls-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2f2f2f;
    margin: 0 0 8px 0;
}

.puls-input {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Afacad Flux', sans-serif;
    font-size: 19px;
    color: #2f2f2f;
    background-color: #f3f5f4;
    border: 2px solid #f3f5f4;
    border-radius: 5px;
}

.puls-input:focus {
    outline: none;
    border: 2px solid #6fb24a;
    background-color: #ffffff;
}

.puls-select {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Afacad Flux', sans-serif;
    font-size: 19px;
    color: #2f2f2f;
    background-color: #f3f5f4;
    border: 2px solid #f3f5f4;
    border-radius: 5px;
    cursor: pointer;
}

.puls-select:focus {
    outline: none;
    border: 2px solid #6fb24a;
    background-color: #ffffff;
}

.puls-forma-gumb {
    margin: 25px 0 0 0;
}

.puls-gumb {
    width: 100%;
    padding: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    background-color: #6fb24a;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.puls-gumb:hover {
    background-color: #5a9d36;
}

/* ============================================
   REZULTAT
   ============================================ */

.puls-rezultat {
    background-color: #6fb24a;
    padding: 30px;
    margin: 0 auto 40px auto;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(111, 178, 74, 0.25);
}

.puls-broj-kontejner {
    background-color: #ffffff;
    padding: 25px;
    margin: 0 0 20px 0;
    border-radius: 5px;
}

.puls-kategorija {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0;
    text-align: center;
}

.puls-kat-tekst {
    font-weight: 700;
    color: #6fb24a;
}

.puls-zona {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    margin: 0 0 12px 0;
    text-align: center;
}

.puls-zona-vrijednost {
    font-size: 48px;
    font-weight: 800;
    color: #6fb24a;
    display: block;
    margin: 10px 0;
}

.puls-tekst {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

/* ============================================
   INFORMACIJSKA SEKCIJA
   ============================================ */

.puls-info {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 40px;
}

.puls-info-naslov {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 15px 0;
    text-align: left;
}

.puls-info-tekst {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    line-height: 1.6;
    margin: 0 0 30px 0;
    text-align: justify;
}

/* ============================================
   TABLICA
   ============================================ */

.puls-tablica-wrapper {
    width: 100%;
    overflow-x: auto;
}

.puls-tablica {
    width: 100%;
    min-width: 600px;
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.puls-tablica thead {
    background-color: #6fb24a;
}

.puls-tablica th {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    padding: 18px 20px;
    text-align: left;
}

.puls-tablica td {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    color: #2f2f2f;
    padding: 16px 20px;
}

/* Naizmjenične boje */
.puls-tablica tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.puls-tablica tbody tr:nth-child(even) {
    background-color: #f3f5f4;
}

/* ============================================
   OBJAŠNJENJE
   ============================================ */

.puls-objasnjenje {
    max-width: 700px;
    margin: 40px auto 70px auto;
    padding: 0 40px;
    background-color: #f3f5f4;
    border-radius: 8px;
}