/*
Theme Name: Cromaris 2
Version: 2.0.0
Author: Drap
Author URI: https://www.drap.hr/
Text Domain: cromaris
*/


body { overflow-x: hidden; }

h1, h2, h3, h4, h5 { text-wrap: balance !important; }

.basic-section .inner-wrapper { max-width: 1100px; margin-inline: auto; }

.basic-section .inner-wrapper:not(.oglasi) h2,
.basic-section .inner-wrapper:not(.oglasi) h3,
.basic-section .inner-wrapper:not(.oglasi) h4,
.basic-section .inner-wrapper:not(.oglasi) h5,
.basic-section .inner-wrapper:not(.oglasi) p,
.basic-section .inner-wrapper:not(.oglasi) ul { margin: 2.6rem 0; } 

.single-proizvod .basic-section .inner-wrapper h2,
.single-proizvod .basic-section .inner-wrapper h3,
.single-proizvod .basic-section .inner-wrapper h4,
.single-proizvod .basic-section .inner-wrapper h5,
.single-proizvod .basic-section .inner-wrapper p,
.single-proizvod .basic-section .inner-wrapper ul { margin: 1rem 0; } 


.pb-60 { padding-bottom: 60px !important; }

.image-order-right .row div:first-child { order: 2; }
.image-order-right .row div:last-child { order: 1; }

footer .featured h3 { text-wrap: balance; }

form .form-group input[type="file"] {
    border: 0;
    padding-bottom: 0;
    opacity: 0;
}
input::placeholder {
  color: rgba(255,255,255,.2);
}
form .form-group select {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #fff;
    width: 100%;
}

/* ######################## accordion ######################## */

.accordion-more { width: 100%; max-height: 0; overflow: hidden; transition: 1s all ease-in-out; }
.accordion-more.active { max-height: 1000px; }

/* ######################## video embed ######################## */

.video-container, .wp-block-embed__wrapper, .style-text p:has(iframe) { position: relative; padding-bottom: 56.25%; margin: 0; }
.video-container:after, .wp-block-embed__wrapper:after, .style-text p:has(iframe):after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.video-container iframe, .video-container video, .wp-block-embed__wrapper iframe, .wp-block-embed__wrapper video, .style-text p:has(iframe) iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 20px; }

.wp-block-embed {
	background: rgba(43,68,119,.6);
	padding: 15px;
	border-radius: 35px;
	margin-block: 35px;
	margin-inline: -15px;
}

/* ######################## karijere/oglasi ######################## */

.oglasi .card { display: flex; }
.oglasi .card .article-text,
.oglasi .card > img { width: 50%; height: auto; }
.oglasi .card .article-text { display: flex; gap: 20px; padding: 35px; flex-direction: column; justify-content: center; }
.oglasi .card > img { border-radius: 20px; }

.oglasi h3 span,
.single-oglas .title span { font-size: 60%; }

.oglasi h3,
.single-oglas .title { text-wrap: balance; }

.oglas-section { 
	background-image: linear-gradient(0deg,rgba(14, 45, 109, 0) 0%, rgba(14, 45, 109, 1) 70%, rgba(14, 45, 109, 1) 100%), url('/wp-content/uploads/2026/03/more.jpg');
	background-repeat: no-repeat, no-repeat;
	background-position: center bottom, center bottom; 
	background-size: cover, cover;
	padding-bottom: 300px;
	margin-bottom: -200px;
}

.oglas-section .card {
	backdrop-filter: blur(10px);
}

.oglas-section .article-text {
	padding: 20px;
}

.single-oglas .subtitle,
.oglas-section .article-text h2 {
	font-size: clamp(24px, 2vw, 36px);
	line-height: 1.2;
    margin: 0 0 clamp(22px, 2vw, 24px) 0;
}

.oglas-section .style-text ul {
	padding-left: 0;
}

@media screen and (max-width: 767px){
	.oglasi .card { flex-direction: column; }
	.oglasi .card .article-text, 
	.oglasi .card > img { width: 100%; }
}

@media screen and (min-width: 992px){
	.oglasi .card:nth-child(even) .article-text { order: 1; }
	.oglasi .card:nth-child(even) > img { order: 2; }
}

/* ######################## inline gallery ######################## */

.wp-block-gallery {
	gap: 15px;
	margin-block: 35px;
}

.wp-block-gallery img {
	border-radius: 20px;
}

/* ######################## image card ######################## */

.card {
	background: rgba(255,255,255,.1);
	padding: 15px;
	border-radius: 35px;
	margin-block: 35px;
	margin-inline: -15px;
}

.card.certificate {
	display: flex;
	justify-content: center;
}
.card.certificate img {
	max-height: 100px;
	width: auto;
}
.card.white {
	background: white;
}

.card .image {
	border-radius: 20px;
	display: block;
}

.card .basic-section {
	padding-inline: 70px;
}

.card ul li:not(:last-child) {
	margin-bottom: 5px;
}

.image-order-left .col-6:nth-child(1) { order: 2; }
.image-order-left .col-6:nth-child(2) { order: 1; }		


/* ######################## rotirajući slider ######################## */


@media only screen and (min-width: 992px) {

	.interactive-wrapper {
		position: relative;
		width: 100%;
		height: calc(100vh + var(--count) * 33vh);
	}

	.interactive-wrapper .sticky-container {
		position: sticky;
		top: 0;
		width: 100%;
		height: 100vh;
		display: flex;
		z-index: 0;
	}

	.interactive-wrapper .left-panel {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		position: relative;
	}

	.interactive-wrapper .text-wrapper {
		position: relative;
		width: 100%;
	}

	.interactive-wrapper .right-panel {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.interactive-wrapper .text-item {
		position: absolute;
		width: 70%;
		top: 0; right: -10%; bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
		transform: translateY(50%);
		opacity: 0;
		pointer-events: none;
	}

	.interactive-wrapper .text-item .card {
		padding: 35px;
		backdrop-filter: blur(10px);
	}

	.interactive-wrapper .text-item .card > * {
		margin: .5rem 0;
	}

	.interactive-wrapper.podsekcija-1 .text-item.item-1, .interactive-wrapper.podsekcija-2 .text-item.item-2,
	.interactive-wrapper.podsekcija-3 .text-item.item-3, .interactive-wrapper.podsekcija-4 .text-item.item-4,
	.interactive-wrapper.podsekcija-5 .text-item.item-5, .interactive-wrapper.podsekcija-6 .text-item.item-6,
	.interactive-wrapper.podsekcija-7 .text-item.item-7, .interactive-wrapper.podsekcija-8 .text-item.item-8,
	.interactive-wrapper.podsekcija-9 .text-item.item-9 {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	.interactive-wrapper.podsekcija-2 .text-item.item-1,
	.interactive-wrapper.podsekcija-3 .text-item.item-1, .interactive-wrapper.podsekcija-3 .text-item.item-2,
	.interactive-wrapper.podsekcija-4 .text-item.item-1, .interactive-wrapper.podsekcija-4 .text-item.item-2, .interactive-wrapper.podsekcija-4 .text-item.item-3,
	.interactive-wrapper.podsekcija-5 .text-item.item-1, .interactive-wrapper.podsekcija-5 .text-item.item-2, .interactive-wrapper.podsekcija-5 .text-item.item-3, .interactive-wrapper.podsekcija-5 .text-item.item-4,
	.interactive-wrapper.podsekcija-6 .text-item.item-1, .interactive-wrapper.podsekcija-6 .text-item.item-2, .interactive-wrapper.podsekcija-6 .text-item.item-3, .interactive-wrapper.podsekcija-6 .text-item.item-4, .interactive-wrapper.podsekcija-6 .text-item.item-5,
	.interactive-wrapper.podsekcija-7 .text-item.item-1, .interactive-wrapper.podsekcija-7 .text-item.item-2, .interactive-wrapper.podsekcija-7 .text-item.item-3, .interactive-wrapper.podsekcija-7 .text-item.item-4, .interactive-wrapper.podsekcija-7 .text-item.item-5, .interactive-wrapper.podsekcija-7 .text-item.item-6,
	.interactive-wrapper.podsekcija-8 .text-item.item-1, .interactive-wrapper.podsekcija-8 .text-item.item-2, .interactive-wrapper.podsekcija-8 .text-item.item-3, .interactive-wrapper.podsekcija-8 .text-item.item-4, .interactive-wrapper.podsekcija-8 .text-item.item-5, .interactive-wrapper.podsekcija-8 .text-item.item-6, .interactive-wrapper.podsekcija-8 .text-item.item-7,
	.interactive-wrapper.podsekcija-9 .text-item.item-1, .interactive-wrapper.podsekcija-9 .text-item.item-2, .interactive-wrapper.podsekcija-9 .text-item.item-3, .interactive-wrapper.podsekcija-9 .text-item.item-4, .interactive-wrapper.podsekcija-9 .text-item.item-5, .interactive-wrapper.podsekcija-9 .text-item.item-6, .interactive-wrapper.podsekcija-9 .text-item.item-7, .interactive-wrapper.podsekcija-9 .text-item.item-8 {
		transform: translateY(-50%);
		opacity: 0;
	}

	.interactive-wrapper.podsekcija-1 { 
		--rot: 0deg; 
		--s1: 1.3; --s2: 0.9; --s3: 0.6; --s4: 0.4; --s5: 0.2; --s6: 0.2; --s7: 0.4; --s8: 0.6; --s9: 0.9;
		--o1: 1;   --o2: 0.7; --o3: 0.4; --o4: 0.2; --o5: 0.1; --o6: 0.1; --o7: 0.2; --o8: 0.4; --o9: 0.7;
	}
	.interactive-wrapper.podsekcija-2 { 
		--rot: -40deg; 
		--s1: 0.9; --s2: 1.3; --s3: 0.9; --s4: 0.6; --s5: 0.4; --s6: 0.2; --s7: 0.2; --s8: 0.4; --s9: 0.6;
		--o1: 0.7; --o2: 1;   --o3: 0.7; --o4: 0.4; --o5: 0.2; --o6: 0.1; --o7: 0.1; --o8: 0.2; --o9: 0.4;
	}
	.interactive-wrapper.podsekcija-3 { 
		--rot: -80deg; 
		--s1: 0.6; --s2: 0.9; --s3: 1.3; --s4: 0.9; --s5: 0.6; --s6: 0.4; --s7: 0.2; --s8: 0.2; --s9: 0.4;
		--o1: 0.4; --o2: 0.7; --o3: 1;   --o4: 0.7; --o5: 0.4; --o6: 0.2; --o7: 0.1; --o8: 0.1; --o9: 0.2;
	}
	.interactive-wrapper.podsekcija-4 { 
		--rot: -120deg; 
		--s1: 0.4; --s2: 0.6; --s3: 0.9; --s4: 1.3; --s5: 0.9; --s6: 0.6; --s7: 0.4; --s8: 0.2; --s9: 0.2;
		--o1: 0.2; --o2: 0.4; --o3: 0.7; --o4: 1;   --o5: 0.7; --o6: 0.4; --o7: 0.2; --o8: 0.1; --o9: 0.1;
	}
	.interactive-wrapper.podsekcija-5 { 
		--rot: -160deg; 
		--s1: 0.2; --s2: 0.4; --s3: 0.6; --s4: 0.9; --s5: 1.3; --s6: 0.9; --s7: 0.6; --s8: 0.4; --s9: 0.2;
		--o1: 0.1; --o2: 0.2; --o3: 0.4; --o4: 0.7; --o5: 1;   --o6: 0.7; --o7: 0.4; --o8: 0.2; --o9: 0.1;
	}
	.interactive-wrapper.podsekcija-6 { 
		--rot: -200deg; 
		--s1: 0.2; --s2: 0.2; --s3: 0.4; --s4: 0.6; --s5: 0.9; --s6: 1.3; --s7: 0.9; --s8: 0.6; --s9: 0.4;
		--o1: 0.1; --o2: 0.1; --o3: 0.2; --o4: 0.4; --o5: 0.7; --o6: 1;   --o7: 0.7; --o8: 0.4; --o9: 0.2;
	}
	.interactive-wrapper.podsekcija-7 { 
		--rot: -240deg; 
		--s1: 0.4; --s2: 0.2; --s3: 0.2; --s4: 0.4; --s5: 0.6; --s6: 0.9; --s7: 1.3; --s8: 0.9; --s9: 0.6;
		--o1: 0.2; --o2: 0.1; --o3: 0.1; --o4: 0.2; --o5: 0.4; --o6: 0.7; --o7: 1;   --o8: 0.7; --o9: 0.4;
	}
	.interactive-wrapper.podsekcija-8 { 
		--rot: -280deg; 
		--s1: 0.6; --s2: 0.4; --s3: 0.2; --s4: 0.2; --s5: 0.4; --s6: 0.6; --s7: 0.9; --s8: 1.3; --s9: 0.9;
		--o1: 0.4; --o2: 0.2; --o3: 0.1; --o4: 0.1; --o5: 0.2; --o6: 0.4; --o7: 0.7; --o8: 1;   --o9: 0.7;
	}
	.interactive-wrapper.podsekcija-9 { 
		--rot: -320deg; 
		--s1: 0.9; --s2: 0.6; --s3: 0.4; --s4: 0.2; --s5: 0.2; --s6: 0.4; --s7: 0.6; --s8: 0.9; --s9: 1.3;
		--o1: 0.7; --o2: 0.4; --o3: 0.2; --o4: 0.1; --o5: 0.1; --o6: 0.2; --o7: 0.4; --o8: 0.7; --o9: 1;
	}

	.interactive-wrapper .item-1 { --item-scale: var(--s1); --item-opacity: var(--o1); }
	.interactive-wrapper .item-2 { --item-scale: var(--s2); --item-opacity: var(--o2); }
	.interactive-wrapper .item-3 { --item-scale: var(--s3); --item-opacity: var(--o3); }
	.interactive-wrapper .item-4 { --item-scale: var(--s4); --item-opacity: var(--o4); }
	.interactive-wrapper .item-5 { --item-scale: var(--s5); --item-opacity: var(--o5); }
	.interactive-wrapper .item-6 { --item-scale: var(--s6); --item-opacity: var(--o6); }
	.interactive-wrapper .item-7 { --item-scale: var(--s7); --item-opacity: var(--o7); }
	.interactive-wrapper .item-8 { --item-scale: var(--s8); --item-opacity: var(--o8); }
	.interactive-wrapper .item-9 { --item-scale: var(--s9); --item-opacity: var(--o9); }

	.interactive-wrapper .circle-container {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100vh;
		height: 100vh;
		border-radius: 50%;
		transform: translate(-85%, -50%) rotate(var(--rot));
		transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
	}

	.interactive-wrapper .circle-item {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 30vh;
		height: 30vh;
		transform: translate(-50%, -50%) rotate(var(--angle)) translate(40vh) rotate(calc(-1 * var(--angle) - var(--rot)));
		transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease, filter 0.8s ease;
		opacity: var(--item-opacity);
	}

	.interactive-wrapper .circle-item-inner {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid #3f3f46; /* zinc-700 */
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
		transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
		transform: scale(var(--item-scale));
	}

	.interactive-wrapper .circle-item-inner img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.interactive-wrapper.podsekcija-1 .item-1, .interactive-wrapper.podsekcija-2 .item-2, .interactive-wrapper.podsekcija-3 .item-3,
	.interactive-wrapper.podsekcija-4 .item-4, .interactive-wrapper.podsekcija-5 .item-5, .interactive-wrapper.podsekcija-6 .item-6,
	.interactive-wrapper.podsekcija-7 .item-7, .interactive-wrapper.podsekcija-8 .item-8, .interactive-wrapper.podsekcija-9 .item-9 {
		z-index: 10;
	}

	.interactive-wrapper.podsekcija-1 .item-1 .circle-item-inner, .interactive-wrapper.podsekcija-2 .item-2 .circle-item-inner,
	.interactive-wrapper.podsekcija-3 .item-3 .circle-item-inner, .interactive-wrapper.podsekcija-4 .item-4 .circle-item-inner,
	.interactive-wrapper.podsekcija-5 .item-5 .circle-item-inner, .interactive-wrapper.podsekcija-6 .item-6 .circle-item-inner,
	.interactive-wrapper.podsekcija-7 .item-7 .circle-item-inner, .interactive-wrapper.podsekcija-8 .item-8 .circle-item-inner,
	.interactive-wrapper.podsekcija-9 .item-9 .circle-item-inner {
		/* box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8); */
	}

	.interactive-wrapper .section-nav {
		position: absolute;
		left: 57%;
		top: 50%;
		transform: translateY(-50%);
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 0;
		z-index: 50;
	}

	.interactive-wrapper .section-nav a {
		background: none;
		border: none;
		color: rgba(255,255,255,.3);
		font-family: inherit;
		font-size: 40px;
		line-height: 28px;
		font-weight: 700;
		cursor: pointer;
		padding: 0 10px;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		position: relative;
		transform-origin: right center;
	}

	.interactive-wrapper.podsekcija-1 .section-nav .nav-item-1 a { color: rgba(255,255,255,1); }
	.interactive-wrapper.podsekcija-2 .section-nav .nav-item-2 a { color: rgba(255,255,255,1); }
	.interactive-wrapper.podsekcija-3 .section-nav .nav-item-3 a { color: rgba(255,255,255,1); }
	.interactive-wrapper.podsekcija-4 .section-nav .nav-item-4 a { color: rgba(255,255,255,1); }
	.interactive-wrapper.podsekcija-5 .section-nav .nav-item-5 a { color: rgba(255,255,255,1); }
	.interactive-wrapper.podsekcija-6 .section-nav .nav-item-6 a { color: rgba(255,255,255,1); }
	.interactive-wrapper.podsekcija-7 .section-nav .nav-item-7 a { color: rgba(255,255,255,1); }
	.interactive-wrapper.podsekcija-8 .section-nav .nav-item-8 a { color: rgba(255,255,255,1); }
	.interactive-wrapper.podsekcija-9 .section-nav .nav-item-9 a { color: rgba(255,255,255,1); }

	.interactive-wrapper .section-nav button:hover {
		color: #a1a1aa; /* zinc-400 */
	}

	.interactive-wrapper .section-nav button:hover::before {
		width: 1rem;
	}
}


/* ######################## mapa ######################## */

.leaflet-control * {
	color: darkblue;
}

.leaflet-marker-pane img {
	filter: drop-shadow(0 0 3px rgba(0,0,0,.2));
}

.map-wrapper {
	position: relative;
	width: 100%;
	height: 80vh;
}

#map {
	width: 100%;
	height: 100%;
}

.leaflet-top.leaflet-left {
	top: 50%;
	transform: translateY(-50%);
}

.legend-panel {
	position: absolute;
	top: 50%;
	right: 5vw;
	transform: translateY(-50%);
	
	width: 30vw;
	max-width: 600px;
	max-height: 80vh;
	overflow-y: auto;
	
	background-color: rgba(15,45,109,.6);
	backdrop-filter: blur(5px);
	padding: 30px;
	box-sizing: border-box;
	border-radius: 12px;
	
	z-index: 1000;
}

.legend-panel p {
	color: #fff;
	line-height: 1.6;
}

.group-item {
	overflow: hidden;
}

.accordion-container .group-item:not(:last-child) {
	margin-bottom: 12px;
}

.group-header {
	font-family: "Unbounded", sans-serif;
	font-size: clamp(16px, 1.1vw, 20px);
	padding: 14px 15px;
	cursor: pointer;
	font-weight: 400;
	color: rgba(255,255,255,.8);
	margin: 0;
}

.group-header:hover {
	color: rgba(255,255,255,1);
}

.group-header.active {
	color: #fff;
}

.group-content {
	display: none;
	padding: 10px;
}

.accordion-item {
	margin: 0 0 8px 30px;
	border-radius: 6px;
	overflow: hidden;
}

.accordion-item:last-child {
	margin-bottom: 0;
}

.accordion-header {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	padding: 10px 0;
	cursor: pointer;
	margin: 0;
	font-size: 14px;
	color: rgba(255,255,255,.6);
	border-bottom: 1px solid rgba(255,255,255,.6);
}

.accordion-header:after {
	content: "\2193";
	font-family: 'Icons';
	display: inline-block;
	font-size: 16px;
	transition: all 0.3s;
}

.accordion-header:hover {
	color: rgba(255,255,255,1);
}

.accordion-header.active {
	font-weight: bold;
	color: #fff;
}

.accordion-header.active::after  {
	transform: rotate(-180deg);
}

.accordion-content {
	display: none;
	padding: 12px 15px;
}

.accordion-content p {
	margin: 0;
	font-size: 14px;
}

@media (max-width: 768px) {
	.legend-panel {
		top: auto;
		bottom: 3vh;
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		width: 80vw;
		max-height: 40vh;
		padding: 15px;
	}

	.leaflet-top.leaflet-left {
		top: 15px;
		transform: none;
	}
}

/* ######################## energetske vrijednosti ######################## */

.energetske-vrijednosti {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 1100px;
	margin-inline: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.energetske-vrijednosti:before {
	content: "";
	position: absolute;
	width: 32%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: linear-gradient(180deg, #1E3E80 0%, #021B4E 100%);
}

.energetske-vrijednosti:after {
	content: '';
	width: 40%;
	height: 40%;
	display: block;
	background: var(--bg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 8;
}

.energetske-vrijednosti > div {
	pointer-events: none;
	position: absolute;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	z-index: 2;
	
	--angle: calc(360deg / var(--count) * var(--i));

	transform: translate(-50%, -50%) rotate(var(--angle)) translate(35%) rotate(calc(-1 * var(--angle)));
	
	left: 50%;
	top: 50%;
	transition: transform 0.3s ease;
}

.energetske-vrijednosti > div:nth-child(1)  {  --i: 0; }
.energetske-vrijednosti > div:nth-child(2)  {  --i: 1; }
.energetske-vrijednosti > div:nth-child(3)  {  --i: 2; }
.energetske-vrijednosti > div:nth-child(4)  {  --i: 3; }
.energetske-vrijednosti > div:nth-child(5)  {  --i: 4; }
.energetske-vrijednosti > div:nth-child(6)  {  --i: 5; }
.energetske-vrijednosti > div:nth-child(7)  {  --i: 6; }
.energetske-vrijednosti > div:nth-child(8)  {  --i: 7; }
.energetske-vrijednosti > div:nth-child(9)  {  --i: 8; }
.energetske-vrijednosti > div:nth-child(10) {  --i: 9; }
.energetske-vrijednosti > div:nth-child(11) { --i: 10; }
.energetske-vrijednosti > div:nth-child(12) { --i: 11; }

.energetske-vrijednosti .image {
	width: 12%;
	height: auto;
	margin-bottom: 5px;
	transition: transform 0.2s;
	pointer-events: auto;
}

.energetske-vrijednosti > div:hover .image {
	transform: scale(1.2);
}

.energetske-vrijednosti p {
	margin: 0;
	color: #fff;
}

.energetske-vrijednosti .tooltip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	width: 280px;
	background: rgba(43, 68, 119, 0.60);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);	
	color: #fff;
	padding: 35px 20px 20px 20px;
	border-radius: 8px;
	font-size: 0.8rem;
	line-height: 1.4;
	text-align: left;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s, transform 0.3s;
	text-align: center;
}

.energetske-vrijednosti .tooltip::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid var(--tooltip-bg);
}

.energetske-vrijednosti .tooltip h3, 
.energetske-vrijednosti .tooltip h4 {
	margin: 20% 0 8px 0 !important;
	color: #fff;
	padding-bottom: 5px;
}

.energetske-vrijednosti .tooltip p {
	color: #ddd;
	font-weight: normal;
	margin: 10px 0;
}

.energetske-vrijednosti img:hover ~ .tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	z-index: 9;
}

.energetske-vrijednosti > div:hover {
	z-index: 10;
}

.energetske-vrijednosti > div:hover img {
	z-index: 10;
}



@media only screen and (min-width: 768px) and (max-width: 991px) {
	.energetske-vrijednosti .tooltip p { font-size: 16px; }
}


@media only screen and (max-width: 991px) {
	.energetske-vrijednosti { flex-direction: column; row-gap: 10px; aspect-ratio: unset; padding: 0 20px; margin-top: 30px; }
	.energetske-vrijednosti:before, .energetske-vrijednosti:after { content: unset; }
	.energetske-vrijednosti > div { pointer-events: auto; position: unset; flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; transform: unset; left: unset; top: unset; }
	.energetske-vrijednosti > div > p { flex-grow: 1; display: flex; align-items: center; justify-content: flex-end; text-align: right; padding-bottom: 5px; border-bottom: 1px solid #015192; margin-left: 20px; }
	.energetske-vrijednosti > div > p:after { content: "\2193"; font-family: 'Icons'; font-size: 20px; color: #62B8FF; margin-left: 30px; transition: all 0.3s; }
	.energetske-vrijednosti > div:hover .image { transform: unset; }
	.energetske-vrijednosti .tooltip { display: none; background: none; position: unset; top: unset; left: unset; transform: unset; width: 100%; padding: 20px 0 10px 20px; text-align: right; opacity: 1; visibility: inherit; pointer-events: auto; }
	.energetske-vrijednosti .tooltip h3, .energetske-vrijednosti .tooltip h4 { margin: 0 !important; }
	.energetske-vrijednosti .image { width: 50px; }
	.energetske-vrijednosti > div.active .tooltip { display: block; }
	.energetske-vrijednosti .tooltip p { max-width: 500px; margin-left: auto; text-wrap: balance; color: #fff; }
	.energetske-vrijednosti > div.active > p:after { transform: rotate(-180deg); }
	.energetske-vrijednosti img:hover ~ .tooltip { transform: none; }

	.interactive-wrapper .right-panel, .interactive-wrapper .section-nav { display: none; }
	.interactive-wrapper .card { padding: 20px; border-radius: 20px; margin-block: 20px; }
	.interactive-wrapper .card h3 { margin-bottom: 10px; }
}


@media only screen and (max-width: 767px) {

	.wp-block-embed { margin-inline: 0; }

	.basic-section .inner-wrapper .card ul { margin-left: 20px; }
	.card { margin-inline: 0; }
	.card .basic-section { padding-inline: 20px; }

	.energetske-vrijednosti .tooltip p { font-size: 14px; }

	.image-card-block .row { flex-direction: column; }
}