/* ===== GLOBALNI SCROLLBAR ===== */
html {
	scrollbar-color: #6c493c #f6efee;
	scrollbar-width: thin;
}

/* Scrollbar za Chrome, Safari, Edge */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #f6efee;
}

::-webkit-scrollbar-thumb {
	background: #6c493c;
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background: #4a3429;
}

/* Radovi sekcija - Salon radova */
.sekcija-radovi {
	background: #553B36;
	background-image:
		linear-gradient(rgba(85, 59, 54, 0.85), rgba(85, 59, 54, 0.85)),
		url('../assets/images/sare.png');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: #f6efee;
	padding: 64px 0;
}

.sekcija-radovi .kontejner {
	max-width: 100%;
	padding: 0 20px;
}

.sekcija-radovi .oznaka-sekcije {
	color: #f6efee;
	margin-bottom: 8px;
	display: block;
	text-align: center;
}

.sekcija-radovi h2 {
	font-size: 44px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 16px;
	color: #f6efee;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.radovi-opis {
	text-align: center;
	font-size: 16px;
	color: #f6efee;
	max-width: 800px;
	margin: 0 auto 40px auto;
	line-height: 1.6;
	opacity: 0.9;
}

.radovi-slajder-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 40px;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.radovi-slajder {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	width: 100%;
	position: relative;
}

.slajd {
	background: transparent;
	border-radius: 0;
	overflow: visible;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
	display: none;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	height: auto;
}

.slajd.aktivan {
	display: flex;
	opacity: 1;
}

.slajd img {
	width: 100%;
	max-width: 640px;
	height: 550px;
	object-fit: cover;
	object-position: center;
	display: block;
	background-color: #f0f0f0;
	border-radius: 8px;
}

.slajd p {
	padding: 16px 0;
	margin: 0;
	font-size: 32px;
	color: #F6EFEE;
	font-weight: 500;
	background: transparent;
	cursor: default;
}

/* Navigacijske dugmice */
.radovi-nav {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #fff;
	border: 2px solid #f6efee;
	color: #6C493C;
	font-size: 19px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	flex-shrink: 0;
	z-index: 10;
}

.radovi-nav:hover {
	background: #f6efee;
}

.radovi-nav:disabled,
.radovi-nav.disabled {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.radovi-nav-prev {
	order: -1;
}

.radovi-nav-next {
	order: 1;
}

/* Modal za fullscreen prikaz */
.radovi-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1001;
	animation: fadeIn 0.3s ease;
}

.radovi-modal img {
	width: 90%;
	height: 90%;
	object-fit: contain;
	max-width: 1400px;
}

.radovi-modal-close {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	font-size: 36px;
	background: #fff;
	border: 2px solid #f6efee;
	color: #6C493C;
	cursor: pointer;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 1002;
}

.radovi-modal-close:hover {
	background: #f6efee;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Responsive */
@media (max-width: 1024px) {
	.radovi-slajder {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.slajd img {
		width: 100%;
		height: 250px;
		max-width: 640px;
		object-fit: cover;
	}

	.slajd {
		max-width: 100%;
	}

	.radovi-nav {
		width: 45px;
		height: 45px;
		font-size: 20px;
	}

	.sekcija-radovi h2 {
		font-size: 36px;
	}
}

@media (max-width: 768px) {
	.sekcija-radovi {
		padding: 48px 0;
	}

	.radovi-slajder-wrapper {
		gap: 16px;
	}

	.radovi-slajder {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.slajd {
		max-width: 100%;
	}

	.slajd img {
		width: 100%;
		height: 350px;
		max-width: 100%;
		object-fit: cover;
		background-color: #f0f0f0;
	}

	.radovi-nav {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}

	.sekcija-radovi h2 {
		font-size: 28px;
	}

	.radovi-modal img {
		width: 95%;
		height: 95%;
	}

	.radovi-modal-close {
		width: 40px;
		height: 40px;
		font-size: 28px;
		top: 20px;
		right: 20px;
	}
}
@media (max-width: 480px) {
  .slajd img{
	height: 250px;
  }
  .slajd p{
	font-size: 24px;
  }
}
@media (max-width: 375px) {
  .slajd img{
	height: 150px;
  }
  .slajd p{
	font-size: 20px;
  }
}
/* Iskustva klijenata sekcija */
/* ===== ISKUSTVA SEKCIJA (ispod footera) ===== */
.iskustva-sekcija {
	background-color: #f6efee;
	padding: 80px 20px;
}

.iskustva-sekcija .kontejner {
	max-width: 1200px;
	margin: 0 auto;
}

.iskustva-header {
	text-align: center;
	margin-bottom: 60px;
}

.iskustva-label {
	display: block;
	color: #201D1D;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.5px;
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 15px;
}

.iskustva-label::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 240px;
	height: 2px;
	background-color: #6c493c;
}

.iskustva-heading {
	font-size: 52px;
	font-weight: 700;
	color: #201D1D;
	margin: 0px auto 24px auto;
	line-height: 1.3;
	max-width: 640px;
}

.iskustva-text {
	font-size: 16px;
	color: #000000;
	max-width: 640px;
	margin: 0 auto;
	line-height: 1.6;
}

.iskustva-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.iskustva-card {
	padding: 40px;
}

.iskustva-stars {
	font-size: 22px;
	color: #6C493C;
	margin-bottom: 24px;
	letter-spacing: 2px;
}

.iskustva-quote {
	font-size: 20px;
	color: #201D1D;
	font-style: italic;
	margin-bottom: 28px;
	line-height: 1.8;
	font-weight: bolder;
}

.iskustva-author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 24px;
	border-top: 1px solid #6b4c36;
}

.iskustva-avatar {
	width: 48px;
	height: 48px;
	background-color: #e0d6d1;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	color: #6c493c;
}

.iskustva-name {
	font-size: 14px;
	color: #201D1D;
	opacity: 0.7;
	font-weight: 500;
}

@media (max-width: 768px) {
	.iskustva-sekcija {
		padding: 60px 20px;
	}

	.iskustva-heading {
		font-size: 32px;
		margin-bottom: 20px;
	}

	.iskustva-label {
		font-size: 12px;
		margin-bottom: 16px;
		padding-bottom: 12px;
	}

	.iskustva-text {
		font-size: 14px;
		margin-bottom: 40px;
	}

	.iskustva-cards {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.iskustva-card {
		padding: 28px;
	}

	.iskustva-stars {
		font-size: 18px;
		margin-bottom: 18px;
	}

	.iskustva-quote {
		font-size: 14px;
		margin-bottom: 20px;
		line-height: 1.6;
	}

	.iskustva-author {
		gap: 10px;
		padding-top: 18px;
	}

	.iskustva-avatar {
		width: 40px;
		height: 40px;
		font-size: 26px;
	}

	.iskustva-name {
		font-size: 13px;
	}
}

/* Proces - timeline sekcija */
.sekcija-proces {
	background: #f6efee;
	background-image:
		linear-gradient(rgba(246, 239, 238, 0.9), rgba(246, 239, 238, 0.9)),
		url('../assets/images/sare.png');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding: 64px 0;
}

.sekcija-proces .kontejner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.sekcija-proces .oznaka-sekcije {
	color: #201D1D;
	margin-bottom: 8px;
	display: block;
	text-align: center;
}

.sekcija-proces h2 {
	font-size: 44px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 16px;
	color: #201d1d;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.sekcija-proces .oznaka-sekcije::after {
    background: #6b4c36;
}
.proces-opis {
	text-align: center;
	color: #201d1d;
	font-size: 16px;
	margin-bottom: 48px;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.linija-vremena {
	position: relative;
	margin: 0 auto;
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.linija-vremena::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 3px;
	height: 100%;
	background: #6c493c;
	transform: translateX(-50%);
	z-index: 0;
	border-radius: 2px;
}

.stavka-linije {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}

.stavka-linije.levo {
	flex-direction: row;
}

.stavka-linije.desno {
	flex-direction: row-reverse;
}

.broj-koraka {
	position: absolute;
	left: 50%;
	top: 0;
	width: 40px;
	height: 40px;
	background: #6c493c;
	border: 4px solid #f6efee;
	color: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 18px;
	z-index: 2;
}

.sadrzaj-linije {
		background: #f6efee;
	background-image:
		linear-gradient(rgba(246, 239, 238, 0.9), rgba(246, 239, 238, 0.9)),
		url('../assets/images/sare.png');
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(108,73,60,0.04);
	padding: 32px;
	min-width: 400px;
	max-width: 450px;
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 40px;
}

.sadrzaj-linije h3 {
	font-size: 20px;
	font-weight: bold;
	color: #6c493c;
	margin: 0 0 12px 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

.sadrzaj-linije p {
	font-size: 15px;
	color: #201d1d;
	margin: 0 0 16px 0;
	line-height: 1.6;
}

.proces-slika {
	width: 100%;
	border-radius: 8px;
	margin-top: 8px;
	object-fit: cover;
	height: 250px;
	opacity: 0.5;
	transition: opacity 0.8s ease-in-out;
	display: block;
}

.proces-slika.vidljiva {
	opacity: 1;
}

.proces-dugme-kontejner {
	text-align: center;
	margin-top: 48px;
}

.proces-dugme {
	background: #6c493c;
	color: #f6efee;
	border: none;
	padding: 16px 40px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-block;
}

.proces-dugme:hover {
	background: #543628;
	transform: translateY(-2px);
}

@media (max-width: 1024px) {
	.linija-vremena {
		max-width: 100%;
		gap: 40px;
	}

	.sadrzaj-linije {
		min-width: 0;
		max-width: 100%;
		margin: 0 20px;
	}

	.stavka-linije {
		flex-direction: column !important;
		align-items: center;
	}

	.linija-vremena::before {
		left: 50%;
	}

	.broj-koraka {
		left: 50%;
	}
}

@media (max-width: 768px) {
	.sekcija-proces {
		padding: 48px 0;
	}

	.sekcija-proces h2 {
		font-size: 32px;
	}

	.proces-opis {
		font-size: 15px;
	}

	.sadrzaj-linije {
		min-width: 0;
		max-width: 100%;
		padding: 24px;
		margin: 0 12px;
	}

	.sadrzaj-linije h3 {
		font-size: 18px;
	}

	.sadrzaj-linije p {
		font-size: 14px;
	}

	.proces-slika {
		height: 200px;
	}
}
html {
	scroll-behavior: smooth;
}

html, body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}
body {
	font-family: 'Poppins', Arial, sans-serif;
	background-color: #F6EFEE;
}

/* Fade in animacija za sekcije */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

section {
	opacity: 0;
	animation: fadeInUp 0.8s ease-out forwards;
	animation-play-state: paused;
}

section.vidljiva {
	animation-play-state: running;
}

/* Hero sekcija */
.sekcija-hero {
	background-color: #f6efee;
	background-image:
		linear-gradient(rgba(246, 239, 238, 0.9), rgba(246, 239, 238, 0.9)),
		url('../assets/images/sare.png');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding: 80px 20px;
	text-align: center;
	position: relative;
}

.sekcija-hero .kontejner {
	max-width: 665px;
	margin: 0 auto;
	padding: 0 20px;
}

.hero-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.hero-kupci {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	font-size: 16px;
	color: #201d1d;

	border-bottom: 1px solid #6C493C;
	margin-top: 30px;
}

.ikonica-korisnik {
	font-size: 20px;
	color: #6c493c;
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

.hero-kupci-tekst {
	display: flex;
	align-items: center;
	gap: 4px;
    margin-bottom: 5px;
}

.hero-brojac {
	color: #201D1D;
	font-size: 16px;
}

.sekcija-hero h1 {
	font-size: 64px;
	font-weight: bold;
	color: #201d1d;
	margin: 0;
	line-height: 1.2;
}

.hero-opis {
	font-size: 16px;
	color: #201d1d;
	max-width: 630px;
	margin: 0 auto;
	line-height: 1.6;
	opacity: 0.7;
}

.sekcija-hero .glavno-dugme {
	background: #6c493c;
	color: #f6efee;
	border: none;
	padding: 22px 32px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-block;
	margin-top: 8px;
}

.sekcija-hero .glavno-dugme:hover {
	background: #543628;
}

@media (max-width: 768px) {
	.sekcija-hero {
		padding: 60px 20px;
	}

	.sekcija-hero h1 {
		font-size: 48px;
	}

	.hero-opis {
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.sekcija-hero {
		padding: 40px 16px;
	}

	.sekcija-hero h1 {
		font-size: 36px;
	}

	.sekcija-hero .kontejner {
		padding: 0 16px;
	}

	.hero-kupci {
		font-size: 14px;
	}
}

/* Sekcija slika ispod hero-a */
.sekcija-slika {
	width: 100%;
	overflow: hidden;
}

.sekcija-slika .kontejner {
	padding: 0;
	max-width: 100%;
	width: 100%;
}

.glavna-slika {
	width: 100%;
	max-height: 870px;
	height: auto;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* Sekcija: Od ideje do savršenog prostora */
.sekcija-ideja-prostor {
    padding: 0px 72px;
}

.ideja-grid {
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 48px;
	margin-bottom: 40px;
	margin-top: 70px;
}

.ideja-levo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.oznaka-sekcije {
    font-size: 16px;
    justify-content: center;
    color: #fff;
    margin-bottom: 8px;
    position: relative;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.oznaka-sekcije::after {
	content: "";
	display: block;
	width: 214px;
	height: 1px;
	background: #f6efee;;
	margin: 4px auto 0px auto;
	border-radius: 2px;
}
.ideja-levo .oznaka-sekcije {
	color: #201D1D;
}
.ideja-levo .oznaka-sekcije::after {
	background: #6c493c;
}
.sekcija-materijali .oznaka-sekcije::after{
	background:#6b4c36;
}
.ideja-naslov {
	font-size: 52px;
	font-weight: bold;
	color: #111;
	line-height: 1.1;
	margin: 0 0 0 0;
	max-width: 570px;
}

.ideja-desno {
	display: flex;
    align-items: center;
    justify-content: center;
}
.ideja-tekst {
	font-size: 16px;
	color: #000000;
	opacity: 0.7;
	font-weight: 400;
	margin: 0;
	max-width: 640px;
	line-height: 2.0;
}

.ideja-prednosti {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 100px;
	margin-bottom: 60px;
	flex-wrap: wrap;
}

.prednost {
	width: 309px;
	height: 155px;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.ikonica {
	font-size: 32px;
	color: #6C493C;
	margin-bottom: 8px;
	display: block;
}

.prednost p {
	font-size: 24px;
	color: #222;
	margin: 0;
	font-weight: 500;
}
@media (max-width: 768px) {
.sekcija-ideja-prostor{
	padding: 0px 32px;
}
.ideja-grid {
	flex-direction: column;
	gap: 32px;
    align-items: start;  
}
.prednost p{
	font-size: 18px;
}
}
@media (max-width: 480px) {
.sekcija-ideja-prostor{
	padding: 0px 16px;
}
.ideja-naslov{
	font-size: 36px;
}
}

/* Header stilovi */
.zaglavlje {
	background-image:
		linear-gradient(rgba(246, 239, 238, 0.9), rgba(246, 239, 238, 0.9)),
		url('../assets/images/sare.png');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 62px;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 100;
	
}

.header-sadrzaj {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 70px;
	width: 100%;
	height: 100%;
	margin-top: 50px;
}

.logo {
	font-weight: bold;
	font-size: 1.3rem;
	margin-right: 32px;
	white-space: nowrap;
}

.navigacija {
	display: flex;
	gap: 24px;
	flex: 1;
}

.navigacija a {
	text-decoration: none;
	color: #222;
	font-size: 1rem;
	transition: color 0.2s;
}

.navigacija a:hover {
	color: #6b4c36;
}

.header-desno {
	display: flex;
	align-items: center;
	gap: 18px;
	white-space: nowrap;
}

.jezik {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 1rem;
	cursor: pointer;
	transition: color 0.2s;
}

.jezik:hover {
	color: #6b4c36;
}

.jezicki-tekst {
	display: flex;
	align-items: center;
	gap: 4px;
}

.jezicki-naziv {
	display: inline;
}

.zastava {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.dugme-kontakt {
	border: 2px solid #6c493c;
	background: transparent;
	padding: 22px 32px;
	border-radius: 8px;
	font-weight: 500;
	color: #201D1D;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.dugme-kontakt:hover {
	background: #6c493c;
	color: #f6efee;
}

/* Hamburger meni */
.hamburger {
	display: none;
	flex-direction: column;
	background: none;
	border: none;
	cursor: pointer;
	gap: 5px;
	padding: 0;
}

.hamburger-linija {
	width: 24px;
	height: 2.5px;
	background: rgb(108, 73, 60);
	border-radius: 2px;
	transition: all 0.3s ease;
}

.hamburger.aktivan .hamburger-linija:nth-child(1) {
	transform: rotate(45deg) translate(10px, 10px);
}

.hamburger.aktivan .hamburger-linija:nth-child(2) {
	opacity: 0;
}

.hamburger.aktivan .hamburger-linija:nth-child(3) {
	transform: rotate(-45deg) translate(7px, -7px);
}

/* Side meni */
.side-meni {
	position: fixed;
	right: 0;
	top: 88px;
	width: 350px;
	height: calc(100vh - 62px);
	background: #f6efee;
	display: flex;
	flex-direction: column;
	padding: 40px 20px;
	gap: 20px;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	z-index: 999;
	overflow-y: auto;
		background-image:
		linear-gradient(rgba(246, 239, 238, 0.9), rgba(246, 239, 238, 0.9)),
		url('../assets/images/sare.png');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.side-meni.otvoren {
	transform: translateX(0);
}

.side-link {
	text-decoration: none;
	color: #222;
	font-size: 1.2rem;
	padding: 12px 0;
	border-bottom: 1px solid #e0d6d1;
	transition: color 0.2s;
}

.side-link:hover {
	color: #6b4c36;
}

.side-meni-overlay {
	position: fixed;
	top: 88px;
	left: 0;
	width: 100%;
	height: calc(100vh - 62px);
	background: rgba(0,0,0,0.5);
	display: none;
	z-index: 998;
}

.side-meni-overlay.vidljiv {
	display: block;
}

/* Header mobilne akcije */
.header-mobilne {
	display: none;
	gap: 25px;
	align-items: center;
}

.header-mobilne .jezik {
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: color 0.2s;
}

.header-mobilne .jezik:hover {
	color: #6b4c36;
}

@media (max-width: 1024px) {
	.header-mobilne {
		display: flex;
	}

	.header-desno {
		display: none;
	}

	.oznaka-jezika{
		display: none;
	}
}
@media (max-width: 768px) {
	.side-meni {
		width: 280px;
	}

	.header-sadrzaj {
		padding: 0 40px;
	}

	.navigacija {
		display: none;
	}

	.hamburger {
		display: flex;
	}

	.header-desno {
		gap: 8px;
		flex-shrink: 0;
	}

	.oznaka-jezika {
		display: none;
	}

	.jezicki-naziv {
		display: none;
	}
    .jezicki-tekst{
		display: none;
	}
	.dugme-kontakt {
display: none;
	}
}

@media (max-width: 600px) {
	.side-meni {
		width: 100%;
		left: 0;
		right: auto;
		transform: translateX(-100%);
		z-index: 999;
	}

	.side-meni.otvoren {
		transform: translateX(0);
	}

	.dugme-kontakt {
		display: none;
	}
}

@media (max-width: 480px) {
	.header-sadrzaj {
		padding: 0 16px;
	}

	.logo {
		margin-right: 8px;
		font-size: 1.1rem;
		flex-shrink: 0;
	}

	.dugme-kontakt {
		padding: 6px 12px;
		font-size: 0.9rem;
	}

	.zastava {
		width: 20px;
		height: 20px;
	}
}



/* Sekcija usluge - Natural scroll sa fade animacijom */
.sekcija-usluge {
	background: #553B36;
	color: #fff;
	padding: 64px 72px;
	position: relative;
}

@media (max-width: 768px) {
	.sekcija-usluge {
		padding: 48px 20px;
		padding-bottom: 0px;
	}
}

.usluge-naslov {
	font-size: 44px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 16px;
}

.usluge-opis {
	text-align: center;
	font-size: 18px;
	max-width: 700px;
	margin: 0 auto 60px auto;
	color: #e8ded7;
}

.usluge-slajder {
	position: relative;
	min-height: auto;
}

.usluga-slajd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	margin-bottom: 80px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.usluga-slajd.vidljiva {
	opacity: 1;
	transform: translateY(0);
}

.usluga-tekst {
	flex: 1;
	color: #F6EFEE;
	max-width: 430px;
}

.usluga-tekst h3 {
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 16px;
}

.usluga-tekst p {
	font-size: 18px;
	line-height: 1.5;
}

.usluga-slika img {
	border-radius: 8px;
	width: 860px;
	height: 490px;
	object-fit: cover;
	box-shadow: 0 4px 24px rgba(0,0,0,0.10);
	transition: all 0.6s ease-in-out;
}



/* Mobile */
@media (max-width: 768px) {
	.usluge-slajder {
		min-height: auto;
	}

	.usluga-slajd {
		flex-direction: column;
		gap: 24px;
		margin-bottom: 40px;
	}

	.usluga-slika img {
		width: 100%;
		max-width: 500px;
		height: auto;
		object-fit: contain;
		border: none !important;
	}

	.usluga-tekst {
		max-width: 100%;
		text-align: center;
	}

	.usluga-tekst h3 {
		font-size: 24px;
	}

	.usluga-tekst p {
		font-size: 16px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1440px) {
.usluga-slika img {
	width: 550px;
}
}
/* Fiksna slika ispod slajdera usluga */
@media (min-width: 769px) {
	.usluge-fiksna-slika {
		display: none;
	}
}

@media (max-width: 768px) {
	.usluge-fiksna-slika {
		display: flex;
		justify-content: center;
	}

	.usluge-fiksna-slika img {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		width: 100%;
		max-width: 500px;
		height: 80px;
		object-fit: cover;
		object-position: center;
	}
}
/* Footer sekcija */
.footer {
	background: #f6efee;
	padding: 48px 0 0 0;
}

.footer-kontejner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px 32px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer-logo {
	margin-bottom: 32px;
}
.footer-logo img {
	width: 160px;
	height: 120px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

.footer-linija {
	width: 90%;
	border: none;
	border-top: 2px solid #e0d6d1;
	margin: 0 0 32px 0;
}

.footer-linkovi {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 80px;
	text-align: left;
}

.footer-linkovi h4 {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 12px;
	color: #000000;
	font-family: 'Poppins', Arial, sans-serif;
}

.footer-linkovi ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-linkovi li {
	font-size: 16px;
	color: #201D1D;
	opacity: 0.8;
	margin-bottom: 8px;
	font-weight: 500;
	font-family: 'Poppins', Arial, sans-serif;
}

.footer-linkovi li a {
	color: #201D1D;
	text-decoration: none;
	transition: color 0.2s;
}

.footer-linkovi li a:hover {
	color: #6c493c;
}

/* Sekcija poziv na akciju */
.sekcija-poziv {
	background: #553B36;
	background-image:
		linear-gradient(rgba(85, 59, 54, 0.9), rgba(85, 59, 54, 0.9)),
		url('../assets/images/sare.png');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: #f6efee;
	padding: 80px 20px;
	position: relative;
	overflow: hidden;
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.poziv-sadrzaj {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sekcija-poziv .oznaka-sekcije {
	color: #f6efee;
	font-size: 16px;
	margin-bottom: 16px;
	display: block;
}

.sekcija-poziv h2 {
	font-size: 52px;
	font-weight: bold;
	color: #f6efee;
	max-width: 640px;
	margin: 0 0 24px 0;
	line-height: 1.2;
}

.sekcija-poziv p {
    font-size: 16px;
    color: #f6efee;
    margin: 0 0 32px 0;
    line-height: 1.6;
    max-width: 640px;
}

.sekcija-poziv .glavno-dugme {
	background: #f6efee;
	color: #6c493c;
	padding: 16px 40px;
	outline: none;
	border: none;
	font-size: 16px;
	border-radius: 8px;
}

.sekcija-poziv .glavno-dugme:hover {
	background: #f6efee;
	cursor: pointer;
}

/* Slike - samo na desktop (1024px+) */
.poziv-slike {
	position: absolute;
	display: none;
	z-index: 1;
}

.poziv-slike img {
	width: 250px;
	height: 190px;
	object-fit: cover;
	border-radius: 8px;
}

.poziv-slika-gore-levo {
	top: 185px;
	left: 170px;
	width: 280px;
	height: 240px;
}

.poziv-slika-gore-desno {
    top: 185px;
    right: 170px;
	width: 200px;
	height: 160px;
}

.poziv-slika-dole-levo {
	bottom: 40px;
	left: 60px;
	width: 220px;
	height: 200px;
}

.poziv-slika-dole-desno {
	bottom: 40px;
	right: 60px;
	width: 240px;
	height: 200px;
}

@media (min-width: 1025px) {
	.poziv-slike {
		display: block;
	}

	.sekcija-poziv {
		min-height: 600px;
	}
}

@media (max-width: 1024px) {
	.sekcija-poziv {
		padding: 60px 32px;
	}

	.sekcija-poziv h2 {
		font-size: 40px;
	}

	.sekcija-poziv p {
		font-size: 16px;
	}
}

@media (max-width: 768px) {
	.sekcija-poziv {
		padding: 48px 20px;
		min-height: auto;
	}

	.sekcija-poziv h2 {
		font-size: 32px;
	}

	.sekcija-poziv p {
		font-size: 15px;
	}

	.poziv-sadrzaj {
		max-width: 100%;
	}
}

/* Kontakt sekcija */



.kontakt-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: center;
    padding: 0 0px 0px 32px;
	margin: 0 auto;
}

.kontakt-levo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
}

.kontakt-naslov {
	font-size: 52px;
	font-weight: bold;
	margin: 0 0 16px 0;
	color: #201d1d;
	line-height: 1.2;
	max-width: 500px;
}

.kontakt-opis {
	font-size: 16px;
	color: #201d1d;
	margin-bottom: 32px;
	max-width: 480px;
	line-height: 1.6;
}

.kontakt-forma {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.kontakt-forma-red {
	display: flex;
	gap: 16px;
}

.kontakt-forma input,
.kontakt-forma textarea {
	font-family: inherit;
	font-size: 16px;
	padding: 12px 14px;
	border: 1.5px solid #d6cfc9;
	border-radius: 8px;
	background: transparent;
	color: #201d1d;
	outline: none;
	transition: border 0.2s;
	resize: none;
}

.kontakt-forma input:focus,
.kontakt-forma textarea:focus {
	border-color: #6c493c;
}

.kontakt-forma textarea {
	min-height: 120px;
	max-width: 202px;
}

.sekcija-kontakt .glavno-dugme {
	background: #6c493c;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 14px 0;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	margin-top: 8px;
	transition: background 0.2s;
	width: auto;
	align-self: flex-start;
	padding: 14px 32px;
}

.sekcija-kontakt .glavno-dugme:hover {
	background: #543628;
}
.sekcija-kontakt .oznaka-sekcije {
	color: #000000;
    margin-bottom: 8px;
    display: block;
    border-bottom: 2px solid #553B36;
    text-align: start;
    max-width: 120px;
}
.kontakt-desno {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kontakt-desno img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	max-height: 990px;
}

/* Responsivnost za male uređaje */
@media (max-width: 1024px) {
	.kontakt-grid {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 0 20px;
	}

	.kontakt-desno {
		display: none;
	}

	.kontakt-naslov {
		font-size: 40px;
	}

	.sekcija-kontakt {
		padding: 48px 0;
	}
}

@media (max-width: 768px) {
	.kontakt-grid {
		gap: 24px;
		padding: 0 16px;
	}

	.kontakt-naslov {
		font-size: 32px;
	}

	.kontakt-opis {
		font-size: 15px;
	}

	.kontakt-forma textarea {
		min-height: 100px;
	}

	.sekcija-kontakt {
		padding: 40px 0;
	}
}

@media (max-width: 600px) {
    .kontakt-forma-red{
		flex-direction: column;
	}
	.kontakt-forma textarea{
		max-width: 100%;
	}
	.sekcija-kontakt .glavno-dugme{
		width: 100%;
	}
}
/* Responsivnost za male uređaje */
@media (max-width: 768px) {
	.footer-kontejner {
		padding: 0 16px 32px 16px;
	}

	.footer-linkovi {
		gap: 40px;
		flex-direction: column;
		align-items: center;
	}

	.footer-linkovi > div {
		text-align: center;
	}

	.footer-logo img {
		width: 120px;
		height: 45px;
	}

	.footer-linija {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.footer-kontejner {
		padding: 0 12px 24px 12px;
	}

	.footer-linkovi {
		gap: 32px;
	}

	.footer-linkovi h4 {
		font-size: 13px;
	}

	.footer-linkovi li {
		font-size: 14px;
	}

	.footer-logo img {
		width: 100px;
		height: 37px;
	}
}

/* Popup kontakt */
.popup-kontakt {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn 0.3s ease;
}

.popup-sadrzaj {
	background: #f6efee;
	padding: 0;
	border-radius: 8px;
	width: 90%;
	max-width: 1000px;
	max-height: 600px;
	position: relative;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	animation: slideUp 0.3s ease;
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
}

.popup-slika {
	width: 100%;
	height: 100%;
	min-height: 500px;
	overflow: hidden;
}

.popup-slika img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.popup-tekst {
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.popup-tekst h3 {
	font-size: 16px;
	color: #201d1d;
	margin: 0 0 16px 0;
	padding-bottom: 16px;
	border-bottom: 2px solid #6c493c;
	display: inline-block;
	text-align: center;
	margin: 0 auto;
}
.popup-info {
	margin: 32px 0;
}

.popup-label {
	font-size: 20px;
	color: #201d1d;
	margin: 0 0 12px 0;
	font-weight: 500;
	opacity: 0.7;
	text-align: center;
}

.popup-vrednost {
	font-size: 28px;
	color: #201d1d;
	margin: 0;
	font-weight: 500;
	text-align: center;
}

.popup-vrednost a {
	color: #201d1d;
	text-decoration: none;
	transition: color 0.2s;
	font-size: 40px;
	
}

.popup-vrednost a:hover {
	color: #6c493c;
}

.zatvori-popup {
	position: absolute;
	top: 30px;
	right: 20px;
	border: none;
	font-size: 32px;
	cursor: pointer;
	color: #6c493c;
	transition: all 0.2s;
	width: 45px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1001;
	backdrop-filter: blur(5px);
}

.zatvori-popup:hover {
	color: #6c493c;
	opacity: 0.8;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 768px) {
	.popup-sadrzaj {
		grid-template-columns: 1fr;
		width: 95%;
		max-width: 100%;
	}

	.popup-slika {
		min-height: 300px;
	}

	.popup-tekst {
		padding: 32px 24px;
	}

	.popup-tekst h3 {
		font-size: 24px;
	}

	.popup-vrednost {
		font-size: 22px;
	}
}

.sekcija-materijali {
	padding: 64px 72px;
}

.sekcija-materijali .oznaka-sekcije {
	color: #201D1D;
}

.sekcija-materijali h2 {
	font-size: 52px;
	font-weight: bold;
	text-align: center;
	margin: 0 auto 16px auto;
	color: #201d1d;
	max-width: 660px;
}

.materijali-opis {
	text-align: center;
	font-size: 16px;
	color: #201d1d;
	opacity:0.7;
	line-height: 1.5;
	max-width: 700px;
	margin: 0 auto 48px auto;
}

.materijali-sadrzaj {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.materijali-lista {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.accordion-item {
	border-bottom: 1px solid #e0d6d1;
}

.accordion-item.otvoren .accordion-header {
	color: #6c493c;
}

.accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
	cursor: pointer;
	font-size: 18px;
	font-weight: 500;
	color: #888;
	transition: color 0.3s ease;
	user-select: none;
}

.accordion-header:hover {
	color: #6c493c;
}

.accordion-toggle {
	font-size: 24px;
	font-weight: 300;
}

.accordion-content {
	display: none;
	padding: 0 0 20px 0;
}

.accordion-item.otvoren .accordion-content {
	display: block;
}

.accordion-content ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.accordion-content li {
	font-size: 15px;
	color: #201d1d;
	padding: 12px 0;
	position: relative;
	padding-left: 24px;
}

.accordion-content li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #6c493c;
	font-weight: bold;
}

.materijali-desno {
	display: flex;
	justify-content: center;
	align-items: center;
}

.slika-materijala {
	text-align: center;
}

.slika-materijala img {
	width: 100%;
	max-width: 450px;
	height: auto;
	border-radius: 8px;
	object-fit: cover;
	box-shadow: 0 2px 12px rgba(108,73,60,0.08);
	margin-bottom: 16px;
}

.materijali-slika-tekst {
	font-size: 16px;
	color: #201D1D;
	margin: 0;
	text-align: start;
}

@media (max-width: 1024px) {
	.sekcija-materijali {
		padding: 64px 40px;
	}

	.materijali-sadrzaj {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.sekcija-materijali h2 {
		font-size: 40px;
	}
}

@media (max-width: 768px) {
	.sekcija-materijali {
		padding: 48px 20px;
	}

	.sekcija-materijali h2 {
		font-size: 32px;
		margin-bottom: 12px;
	}

	.materijali-opis {
		font-size: 15px;
		margin-bottom: 32px;
	}

	.materijali-sadrzaj {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}