/* ============================================================
   ZELENI NAR, DIZAJN SLOJ v2
   ------------------------------------------------------------
   Econest tema je krojena za kratke engleske naslove i za malo
   teksta, pa su na srpskom nastale rupe: naslov levo, sitan sivi
   tekst desno, i tri stotine praznih piksela ispod. Ovaj sloj
   ispravlja ritam, tipografiju i kartice na svim stranicama
   odjednom, bez diranja pojedinačnih pogleda.

   Redosled: main.css → zeleni-nar.css → OVAJ FAJL.
   ============================================================ */

:root {
	/* Vertikalni ritam, jedan izvor istine umesto p-t-120 svuda */
	--zn-sekcija-y: clamp(46px, 5.4vw, 80px);
	--zn-blok-y: clamp(28px, 3.5vw, 48px);

	/* Tipografska skala */
	--zn-h1: clamp(34px, 4.6vw, 62px);
	--zn-h2: clamp(26px, 3.2vw, 42px);
	--zn-h3: clamp(20px, 2.1vw, 26px);
	--zn-h4: clamp(17px, 1.5vw, 20px);
	--zn-uvod: clamp(17px, 1.35vw, 19px);

	/* Površine */
	--zn-radius: 18px;
	--zn-radius-veliki: 24px;
	--zn-ivica: #e6ede0;
	--zn-podloga: #f7faf4;
	--zn-podloga-2: #f2f7ec;
	--zn-senka: 0 10px 30px rgba(14, 42, 24, .07);
	--zn-senka-jaka: 0 16px 40px rgba(14, 42, 24, .12);
}

/* ---------------------------------------------------------------
   1. RITAM SEKCIJA
   Tema je svuda stavljala 120 px gore i dole, pa su kratke sekcije
   plivale u praznini. Sada je razmak jedan i prati veličinu ekrana.
   --------------------------------------------------------------- */
main > section[class*="p-t-"],
main > section[class*="p-b-"] {
	padding-top: var(--zn-sekcija-y);
	padding-bottom: var(--zn-sekcija-y);
}
main > section.p-t-0 { padding-top: 0; }
main > section.p-b-0 { padding-bottom: 0; }

/* Dve susedne sekcije na istoj podlozi ne treba da razmak plaćaju dvaput */
main > section + section:not([style*="background-image"]) { padding-top: calc(var(--zn-sekcija-y) * .72); }

/* Kartice u istom redu se poravnavaju po dnu, bez obzira na dužinu teksta */
main .row > [class*="col-"] > .service-card,
main .row > [class*="col-"] > .service-card-2,
main .row > [class*="col-"] > .blog-card-2,
main .row > [class*="col-"] > .volunteer-card,
main .row > [class*="col-"] > .work-process-card { height: 100%; }

/* Naizmenična podloga daje ritam bez dodatnog rada u pogledima */
main > section:nth-of-type(even):not([style*="background-image"]):not(.breadcrumb-section):not(.contact-info-section):not(.zn-cta-pojas):not(.services-we-offer-section):not(.dust-recycling-section) {
	background: var(--zn-podloga);
}

/* ---------------------------------------------------------------
   2. TIPOGRAFIJA
   Jedna skala, tamniji tekst, čitljiva dužina reda.
   --------------------------------------------------------------- */
.breadcrumb-title h1 { font-size: var(--zn-h1); line-height: 1.08; }
.common-title h2, .section-top-5 h2, .section-top-6 h2, .section-top-4 h2 {
	font-size: var(--zn-h2);
	line-height: 1.14;
	letter-spacing: -.01em;
}
main h3 { font-size: var(--zn-h3); line-height: 1.25; }
main h4 { font-size: var(--zn-h4); line-height: 1.3; }

main p { line-height: 1.7; }
main .text > p, .section-top-5 .right > p, .section-top-6 .right > p {
	font-size: var(--zn-uvod);
	color: #4A4A45;
}
main .text > p:last-child, main .service-content p:last-child { margin-bottom: 0; }

/* Tekst u karticama je bio sitniji od praga čitljivosti na desktopu */
.service-card p, .service-card-2 p, .blog-card-2 p, .work-process-card p,
.volunteer-card p, .zn-oglas-kartica p, .zn-monitor-kartica p {
	font-size: 15.5px;
	line-height: 1.65;
	color: #4A4A45;
}
.service-card h4, .service-card-2 h4, .service-card h3 { margin-bottom: 12px; }

/* Podnaslov iznad naslova, sitan ali čitljiv */
.common-subtitle span {
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--theme-color-3);
	font-weight: 500;
}

/* ---------------------------------------------------------------
   3. UVODNI BLOK STRANICE
   Bio je: naslov levo, uzan sivi stubac desno, pa velika rupa.
   Sada: naslov i tekst u dve ravnopravne kolone, bez rupe.
   --------------------------------------------------------------- */
.section-top-5, .section-top-6, .section-top-4 {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(20px, 3vw, 48px);
	align-items: start;
	margin-bottom: var(--zn-blok-y);
}
/* Kad ispod uvodnog bloka nema ničega, ne ostavljamo prazan pojas */
.section-top-5:last-child, .section-top-6:last-child, .section-top-4:last-child { margin-bottom: 0; }

/* Naslov dobija tanku oznaku sa strane, da leva kolona ne deluje prazno */
.section-top-5 > .left, .section-top-6 > .left { position: relative; }
.section-top-5 > .left::before, .section-top-6 > .left::before {
	content: "";
	position: absolute;
	left: -22px; top: 6px; bottom: 6px;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(to bottom, var(--theme-color), var(--theme-color-2));
}
@media (max-width: 1199px) {
	.section-top-5 > .left::before, .section-top-6 > .left::before { display: none; }
}
.section-top-5 > .left, .section-top-6 > .left, .section-top-4 > .left { max-width: 100%; }
.section-top-5 > .right, .section-top-6 > .right {
	max-width: 62ch;
	/* tema je desnoj koloni davala padding odozgo, pa je tekst visio ispod naslova */
	padding-top: 0;
	margin-top: 0;
}
.section-top-5 .right h6 {
	font-size: 18px;
	line-height: 1.5;
	color: var(--title-color);
	margin-bottom: 14px;
}
@media (max-width: 991px) {
	.section-top-5, .section-top-6, .section-top-4 { grid-template-columns: 1fr; align-items: start; }
}

/* Kad je naslov sam u redu, tekst ispod ne sme biti širok preko cele strane */
main .text { max-width: 78ch; }

/* ---------------------------------------------------------------
   4. KARTICE
   Jedinstven okvir, dubina na hover, unutrašnji razmak koji diše.
   --------------------------------------------------------------- */
.service-card, .service-card-2, .blog-card-2, .volunteer-card,
.testimonial-card, .contact-card, .work-process-card {
	border-radius: var(--zn-radius);
	border: 1px solid var(--zn-ivica);
	background: #fff;
	transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
.service-card, .service-card-2, .work-process-card { padding: clamp(22px, 2.2vw, 30px); }

.service-card:hover, .service-card-2:hover, .blog-card-2:hover,
.volunteer-card:hover, .contact-card:hover, .work-process-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--zn-senka);
	border-color: #cfe0bf;
}

/* Ikona u kartici dobija svoj krug, umesto da lebdi */
.service-card .service-top > i, .service-card-2 .service-top > i {
	width: 54px; height: 54px; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--zn-podloga-2);
	color: var(--theme-color-3);
	font-size: 22px;
	transition: background .28s ease, color .28s ease;
}
.service-card:hover .service-top > i, .service-card-2:hover .service-top > i {
	background: var(--theme-color-2);
}

/* Fotografija u kartici ide do ivice, bez belog okvira */
.blog-card-2 .thumb, .volunteer-card .thumb, .testimonial-card .thumb {
	border-radius: var(--zn-radius) var(--zn-radius) 0 0;
	overflow: hidden;
}
.blog-card-2 .content, .volunteer-card .author-info { padding: clamp(18px, 1.8vw, 24px); }

/* ---------------------------------------------------------------
   5. DUGMAD
   Jasna razlika između glavne i sporedne radnje.
   --------------------------------------------------------------- */
.e-primary-btn {
	border-radius: 100px;
	font-weight: 500;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.e-primary-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14, 42, 24, .14); }
.e-primary-btn:active { transform: translateY(0); }

/* Sporedno dugme je obrisano, ne puno, da glavno bude glavno */
.zn-dugme-sporedno {
	background: transparent !important;
	border: 1px solid var(--theme-color-3) !important;
	color: var(--theme-color-3) !important;
}
.zn-dugme-sporedno:hover { background: var(--theme-color-3) !important; color: #fff !important; }
.zn-dugme-sporedno .icon-wrap { background: var(--theme-color-3) !important; color: #fff !important; }

/* ---------------------------------------------------------------
   6. SLIKE
   Nikad razvučene, uvek zaobljene, uvek u istom odnosu u nizu.
   --------------------------------------------------------------- */
main img { max-width: 100%; height: auto; }
.zn-cover, .thumb { border-radius: var(--zn-radius); overflow: hidden; }
.breadcrumb-thumb { border-radius: 0; }

/* Široke fotografije preko cele strane su bile visoke i po 900 px, pa je
   posetilac morao da skroluje ceo ekran pre nego što stigne do sadržaja.
   Sada imaju odnos stranica, a kadar se seče po sredini. */
main > section > .container > .thumb { margin-top: 0; }
main > section > .container > .thumb > img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	display: block;
}

@media (max-width: 767px) {
	main > section > .container > .thumb > img { max-height: 300px; }
}

/* ---------------------------------------------------------------
   7. LISTE U TEKSTU
   Tema ih je ostavila sa podrazumevanim tačkama i bez razmaka.
   --------------------------------------------------------------- */
main .text ul, main .service-content ul, .zn-faq-odgovor ul, .accordion-body ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 18px;
}
main .text ul > li, main .service-content ul > li, .zn-faq-odgovor ul > li, .accordion-body ul > li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 9px;
}
main .text ul > li::before, main .service-content ul > li::before,
.zn-faq-odgovor ul > li::before, .accordion-body ul > li::before {
	content: "";
	position: absolute;
	left: 4px; top: .62em;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--theme-color);
}

/* ---------------------------------------------------------------
   8. ZAVRŠNI POJAS PRED FUTEROM
   --------------------------------------------------------------- */
.zn-cta-pojas {
	background: var(--theme-color-3);
	color: #fff;
	border-radius: var(--zn-radius-veliki);
	margin: 0 clamp(12px, 3vw, 40px) clamp(28px, 4vw, 48px);
	padding: clamp(26px, 3.4vw, 42px) clamp(18px, 3vw, 48px);
}
.zn-cta-pojas h2, .zn-cta-pojas h3 { color: #fff; font-size: clamp(20px, 2.6vw, 26px); margin-bottom: 8px; }
.zn-cta-pojas p { color: #C8D6C2; font-size: 15px; margin-bottom: 14px; }
.zn-cta-pojas .common-title { margin-bottom: 4px; }
.zn-cta-pojas .zn-cta-dugmad { margin-top: 6px; }

/* ---------------------------------------------------------------
   9. TELEFON
   Web izgled iznad 992 px se ovim ne dira.
   --------------------------------------------------------------- */
@media (max-width: 991px) {
	:root { --zn-sekcija-y: clamp(40px, 9vw, 64px); }

	.breadcrumb-content { padding: 40px 22px; }
	.section-top-5 .right, .section-top-6 .right { max-width: 100%; }
	main .text { max-width: 100%; }

	/* Dugmad na telefonu idu preko cele širine, lakše se pogađaju palcem */
	.zn-cta-dugmad .e-primary-btn { width: 100%; justify-content: center; }
	.zn-cta-pojas { margin-inline: 12px; border-radius: 20px; }
}

/* ---------------------------------------------------------------
   10. BEZ ANIMACIJA PRI SKROLOVANJU
   Tema je koristila AOS, koji je sadržaj držao na opacity 0 dok se
   ne skroluje do njega. To je dvaput dovelo do toga da deo strane
   naprosto nije bio vidljiv. Sadržaj je važniji od efekta.
   --------------------------------------------------------------- */
[data-aos], .aos-init, .aos-animate, .zn-ulaz {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ---------------------------------------------------------------
   11. PODMENI „PROGRAMI"
   Zaglavlje je bilo position: static bez z-indexa, pa je padajući
   meni završavao ispod fotografije u zaglavlju stranice.
   --------------------------------------------------------------- */
.header-section-4 { position: relative; z-index: 200; }
.header-section-4 .header-bottom { position: relative; z-index: 201; }
.main-menu li.has-dropdown { z-index: 202; }
.main-menu .sub-menu { z-index: 203; }

/* Sadržaj strane ne sme da se penje iznad zaglavlja */
main, .breadcrumb-section { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   12. REDOVI UNUTAR FORMI
   Bootstrap `row` ima negativne bočne margine, koje forma i kartica
   ne poništavaju, pa su polja virila 15 px preko okvira na telefonu.
   --------------------------------------------------------------- */
form .row,
.zn-korak .row,
.contact-form-3 .row,
.zn-pretplata .row {
	margin-left: 0;
	margin-right: 0;
}
form .row > [class*="col-"],
.zn-korak .row > [class*="col-"],
.contact-form-3 .row > [class*="col-"],
.zn-pretplata .row > [class*="col-"] {
	padding-left: 0;
	padding-right: 0;
}

/* razmak između polja kad su jedno pored drugog */
@media (min-width: 576px) {
	form .row > [class*="col-md-6"]:first-child,
	.zn-korak .row > [class*="col-md-6"]:first-child,
	.contact-form-3 .row > [class*="col-md-6"]:first-child,
	.zn-pretplata .row > [class*="col-sm-6"]:first-child { padding-right: 8px; }

	form .row > [class*="col-md-6"]:last-child,
	.zn-korak .row > [class*="col-md-6"]:last-child,
	.contact-form-3 .row > [class*="col-md-6"]:last-child,
	.zn-pretplata .row > [class*="col-sm-6"]:last-child { padding-left: 8px; }
}

/* ============================================================
   13. DIZAJN v3, po uzoru na reference (Evergreen, Finovate)
   ------------------------------------------------------------
   Šta te teme rade a Econest ne: topla podloga umesto sterilno
   bele, veći radijusi, mekše senke umesto tvrdih ivica, i mnogo
   više vazduha unutar kartica. Ovo je taj sloj.
   ============================================================ */

:root {
	/* Topli neutralni tonovi umesto čisto bele */
	--zn-krem: #FAFBF7;
	--zn-krem-2: #F3F7EE;
	--zn-ivica-meka: #E8EFE1;

	/* Zaobljenja su veća, kao na referencama */
	--zn-radius: 22px;
	--zn-radius-veliki: 32px;
	--zn-radius-mali: 14px;

	/* Senke su mekše i šire, ne tvrde */
	--zn-senka: 0 4px 24px rgba(20, 45, 25, .06);
	--zn-senka-jaka: 0 18px 44px rgba(20, 45, 25, .10);
}

body { background: #fff; }

/* Naizmenične sekcije dobijaju topao ton, ne sivilo */
main > section:nth-of-type(even):not([style*="background-image"]):not(.breadcrumb-section):not(.contact-info-section):not(.zn-cta-pojas):not(.services-we-offer-section):not(.dust-recycling-section) {
	background: var(--zn-krem);
}

/* --- Kartice: bez tvrde ivice, sa mekom senkom --- */
.service-card, .service-card-2, .blog-card-2, .volunteer-card,
.testimonial-card, .contact-card, .work-process-card,
.zn-monitor-kartica, .zn-oglas-kartica, .zn-donator-kartica, .zn-korak {
	border-radius: var(--zn-radius);
	border: 1px solid var(--zn-ivica-meka);
	box-shadow: var(--zn-senka);
	background: #fff;
}
.service-card:hover, .service-card-2:hover, .blog-card-2:hover,
.volunteer-card:hover, .contact-card:hover, .work-process-card:hover,
.zn-oglas-kartica:hover, .zn-donator-kartica:hover {
	box-shadow: var(--zn-senka-jaka);
	border-color: #D6E4CB;
	transform: translateY(-4px);
}

/* Više vazduha unutar kartica, kao na referencama */
.service-card, .service-card-2, .work-process-card { padding: clamp(26px, 2.6vw, 36px); }
.zn-monitor-kartica, .zn-oglas-kartica { padding: clamp(26px, 2.6vw, 34px); }

/* --- Ikone u karticama: veći krug, mekši ton --- */
.service-card .service-top > i, .service-card-2 .service-top > i {
	width: 60px; height: 60px; font-size: 24px;
	background: var(--zn-krem-2);
	border: 1px solid var(--zn-ivica-meka);
}
.service-card:hover .service-top > i, .service-card-2:hover .service-top > i {
	background: var(--theme-color-2);
	border-color: var(--theme-color-2);
}

/* --- Naslovi: krupniji i tešnji, kao na referencama --- */
:root {
	--zn-h1: clamp(38px, 5.2vw, 68px);
	--zn-h2: clamp(28px, 3.6vw, 46px);
}
.common-title h2, .section-top-5 h2, .section-top-6 h2, .section-top-4 h2 {
	letter-spacing: -.02em;
	line-height: 1.1;
}
.breadcrumb-title h1 { letter-spacing: -.02em; }

/* --- Dugmad: veća i mekša --- */
.e-primary-btn {
	padding: 14px 26px;
	font-size: 15.5px;
}
.e-primary-btn:hover { box-shadow: 0 10px 24px rgba(20, 45, 25, .16); }

/* --- Fotografije: veće zaobljenje --- */
.zn-cover, .thumb, .zn-clanak-slika, .zn-donacije-slika, .zn-istaknuta-slika {
	border-radius: var(--zn-radius);
}
main > section > .container > .thumb { border-radius: var(--zn-radius-veliki); }
main > section > .container > .thumb > img { border-radius: var(--zn-radius-veliki); }

/* --- Veliki blokovi: pojas pred futerom, staklena kartica --- */
.zn-cta-pojas, .zn-faq-kontakt, .zn-pretplata, .dust-recycle-card, .zn-sadnja-danas {
	border-radius: var(--zn-radius-veliki);
}

/* --- Breadcrumb: zaobljen i uvučen, ne preko cele širine --- */
.breadcrumb-section > .container-fluid { max-width: 1400px; margin: 0 auto; padding-inline: clamp(12px, 3vw, 40px); }
.breadcrumb-section .row.g-0 { border-radius: var(--zn-radius-veliki); overflow: hidden; }

/* --- Brojači preko fotografije: mekši i čitljiviji --- */
.company-achievements-2 .achievement {
	background: rgba(255, 255, 255, .96) !important;
	backdrop-filter: blur(10px);
	border: 1px solid var(--zn-ivica-meka);
	border-radius: var(--zn-radius);
	box-shadow: var(--zn-senka);
}

/* --- Podnaslov sekcije: pilula, ne goli tekst --- */
.common-subtitle {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--zn-krem-2);
	border: 1px solid var(--zn-ivica-meka);
	border-radius: 100px;
	padding: 7px 16px 7px 12px;
	margin-bottom: 16px;
}
.common-subtitle img { width: 18px; height: 18px; }
.text-center .common-subtitle, .zn-faq-vrh .common-subtitle { margin-inline: auto; }

/* --- Bočne ikone u hero sekciji: nisu nosile vrednost a ulazile su
       preko teksta na svakoj širini ispod 1600 px. Uklonjene. --- */
.hero-slider-social { display: none !important; }

/* --- Razmak između sekcija koje se dodiruju --- */
main > section + section { border-top: 0; }
.contact-info-section { padding-top: 0 !important; }

@media (max-width: 767px) {
	:root { --zn-radius: 18px; --zn-radius-veliki: 22px; }
	.service-card, .service-card-2, .work-process-card { padding: 22px 20px; }
	.breadcrumb-section > .container-fluid { padding-inline: 12px; }
}

/* --- Kartice u istom redu: naslov zauzima isti prostor bez obzira
       na broj redova, pa se opis i dno poravnavaju --- */
@media (min-width: 768px) {
	.services-section .service-card .service-top,
	.services-section .service-card-2 .service-top { min-height: 78px; align-items: center; }
	.services-section .service-card h4,
	.services-section .service-card-2 h4 { margin-bottom: 0; }
}
.services-section .row > [class*="col-"] { display: flex; }
.services-section .row > [class*="col-"] > .service-card,
.services-section .row > [class*="col-"] > .service-card-2 { flex: 1; }

/* ---------------------------------------------------------------
   14. BROJAČI ISPOD FOTOGRAFIJE
   Tema ih je stavljala apsolutno, sa `bottom: -210px`, pa su visili
   izvan sekcije. Sledeća sekcija je naletala preko njih i sekla ih
   po sredini. Sada su u normalnom toku, sa negativnim odmakom koji
   ih delimično preklapa sa fotografijom, pa uvek imaju svoj prostor.
   --------------------------------------------------------------- */
.about-us-section-2 .company-achievements-2 {
	position: static;
	bottom: auto;
	margin-top: clamp(-70px, -5vw, -46px);
	margin-inline: clamp(10px, 2vw, 26px);
	width: auto;
	z-index: 2;
	position: relative;
}

/* Fotografija ne sme da seče kartice koje na nju naležu */
.about-us-section-2 > .container > .thumb { overflow: visible; }
.about-us-section-2 > .container > .thumb > img { border-radius: var(--zn-radius-veliki); }

.company-achievements-2 .achievement {
	padding: clamp(20px, 2vw, 28px) clamp(16px, 1.6vw, 22px);
	text-align: center;
}
.company-achievements-2 .achievement i {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--zn-krem-2); color: var(--theme-color-3);
	font-size: 19px; margin-bottom: 12px;
}
.company-achievements-2 .achievement h2 {
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1;
	margin-bottom: 6px;
	color: var(--theme-color-3);
}
.company-achievements-2 .achievement p {
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
	color: var(--body-color);
}

@media (max-width: 991px) {
	.about-us-section-2 .company-achievements-2 {
		margin-top: -34px;
		margin-inline: 0;
		padding-inline: 12px;
	}
}

/* ---------------------------------------------------------------
   15. BREADCRUMB LINK
   Pravilo za linkove u telu strane (tamnozelena boja) pregazilo je
   i link „Početna" u zaglavlju stranice, pa je bio tamnozelen na
   tamnozelenoj pozadini, praktično nevidljiv.
   --------------------------------------------------------------- */
.breadcrumb-nav ul li a {
	color: rgba(255, 255, 255, .8) !important;
	text-decoration: none !important;
}
.breadcrumb-nav ul li a:hover { color: #fff !important; }

/* ---------------------------------------------------------------
   16. KARTICE SA FOTOGRAFIJOM (service-card-3)
   Proces na stranici sadnje i slajder programa na početnoj nisu
   bili obuhvaćeni novim stilom: radius 10 px, bez senke i ivice.
   --------------------------------------------------------------- */
.service-card-3 {
	border-radius: var(--zn-radius);
	border: 1px solid var(--zn-ivica-meka);
	box-shadow: var(--zn-senka);
	background: #fff;
	overflow: hidden;
	transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
.service-card-3:hover {
	transform: translateY(-4px);
	box-shadow: var(--zn-senka-jaka);
	border-color: #D6E4CB;
}
.service-card-3 .thumb { border-radius: 0; }
.service-card-3 .thumb img { border-radius: 0; }
.service-card-3 .content { padding: 22px 24px 26px; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILNI RITAM — tema na telefonu ostavlja 60-120px praznine po
   sekciji, pa strana deluje prazno i beskonačna za skrolovanje.
   Ovde se SVI vertikalni razmaci sabijaju na max-width 767px.
   !important je nužan: gazimo utility klase (spacing.css) i temu.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
	/* Hero početne: sadržaj kreće odmah ispod zaglavlja */
	.hero-content-4 { padding: 18px 0 26px !important; }
	.hero-content-4 .subtitle { margin-bottom: 14px; }

	/* Sekcijski razmaci: veliki koraci teme padaju na trećinu */
	.p-t-120 { padding-top: 44px !important; }
	.p-b-120 { padding-bottom: 44px !important; }
	.p-t-100 { padding-top: 40px !important; }
	.p-b-100 { padding-bottom: 40px !important; }
	.p-t-125 { padding-top: 44px !important; }
	.p-t-80 { padding-top: 36px !important; }
	.p-b-80 { padding-bottom: 36px !important; }
	.p-t-60 { padding-top: 30px !important; }
	.p-b-60 { padding-bottom: 30px !important; }

	/* xs varijante (one zapravo važe na telefonu) */
	.p-t-xs-80 { padding-top: 40px !important; }
	.p-b-xs-80 { padding-bottom: 40px !important; }
	.p-t-xs-60 { padding-top: 30px !important; }
	.p-b-xs-60 { padding-bottom: 30px !important; }
	.p-t-xs-50 { padding-top: 26px !important; }
	.p-b-xs-50 { padding-bottom: 26px !important; }
	.p-t-xs-40 { padding-top: 22px !important; }
	.p-b-xs-40 { padding-bottom: 22px !important; }

	/* Unutrašnji razmaci naslova i blokova */
	.m-b-60 { margin-bottom: 26px !important; }
	.m-b-50 { margin-bottom: 24px !important; }
	.m-b-40 { margin-bottom: 20px !important; }
	.m-b-30 { margin-bottom: 16px !important; }
	.m-b-xs-60 { margin-bottom: 26px !important; }
	.m-b-xs-40 { margin-bottom: 20px !important; }
	.m-b-lg-60, .m-b-md-60, .m-b-xs-60 { margin-bottom: 26px !important; }
	.m-t-50 { margin-top: 22px !important; }
	.m-t-30 { margin-top: 16px !important; }

	/* Breadcrumb hero podstrana: niži i bliži zaglavlju */
	.breadcrumb-content { padding: 34px 24px !important; min-height: 0 !important; }
	.breadcrumb-title h1 { font-size: clamp(28px, 8vw, 36px); }

	/* Naslovi sekcija: manji skok, manje vazduha */
	.common-title h2 { font-size: clamp(24px, 6.6vw, 30px); }
	.common-title { margin-bottom: 12px; }
	.common-subtitle { margin-bottom: 8px; }

	/* ── Jedan levi/desni „konac" za sve: ivica sadržaja je uvek 16px ── */
	.container { padding-left: 16px !important; padding-right: 16px !important; }
	.breadcrumb-section .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
	.zn-cta-pojas { margin-inline: 16px !important; }
	.zn-cta-pojas .container { padding-left: 6px !important; padding-right: 6px !important; }
	.zn-cta-pojas .common-title { padding-inline: 0; }

	/* ── Kartice klize prstom umesto beskonačnog stuba ── */
	.work-process-cards {
		display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px;
		scroll-snap-type: x mandatory; padding: 4px 4px 16px;
		scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.work-process-cards::-webkit-scrollbar { display: none; }
	.work-process-cards .work-process-card { flex: 0 0 82%; scroll-snap-align: start; }

	/* ── Istaknuti programi: niža fotografija, kraći tekst ── */
	.event-card-3 .event-thumb img { max-height: 190px; object-fit: cover; width: 100%; }
	.event-card-3 .card-content { padding-top: 14px; }
	.event-card-3 .event-card-title h2 { font-size: 20px; }
	.event-card-3 .event-card-text p {
		display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	}
	.event-card-3.m-b-30 { margin-bottom: 22px !important; }

	/* ── Uvodne fotografije sekcija niže na telefonu ── */
	.about-us-section-2 .thumb { height: auto !important; }
	.about-us-section-2 .thumb img { max-height: 240px !important; height: auto; width: 100%; object-fit: cover; border-radius: 16px; }

	/* ── Kartica obećanja i slične tamne kartice: manji unutrašnji prostor ── */
	.dust-recycle-card { padding: 22px 18px !important; }

	/* Futer: zbijene kolone, prostor za donju traku */
	.footer-section .footer-widget { margin-bottom: 8px; }
	.footer-section .row.p-b-30 { padding-bottom: 8px !important; }
}