.custom-widget{
	background-color:#D6D8D9;
	height:100vh;
	border-radius:20px;
	padding:20px;
}
.left-content {
	width:50%;
	float: left;
	transition: width 0.5s ease;
	padding:10px;
	height:90vh;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.stunning{
	font-size: 1.2em;
	color: black;
	font-weight:600;
}
.new-li{
	display:flex;
	align-items:center;
}
.right-content {    
	   width: 50%; /* Prilagodi širinu prema potrebi */
	float: right;
	position: relative;
	height:90vh;
	background-image:url(https://wordpress-1328415-5202174.cloudwaysapps.com/wp-content/uploads/2024/02/Production-services.jpg);
	background-position: center center;
	background-size: cover;
	border-radius:20px;
	background-repeat:no-repeat;
}

.slide-arrow-right {
	position: absolute;
	top: 45%;
	right: 5%;
}

.slide-arrow-left {
	position: absolute;
	top: 45%;
	left: 5%;
}

.new-img{
	animation: slideIn 0.5s ease forwards;
}
.text{margin-bottom:20px;}

@keyframes slideIn {
0% {
	opacity: 0;
	transform: translateX(100%);
	}

100% {
	opacity: 1;
	transform: translateX(0%);
	}
}

.text{
	font-size: 1.6em;
	color: #191B1D99;
	margin:10px;
}
/* Stil za ikonu unutar lijeve strane */
.left-content li {
	list-style: none; /* Uklanjanje standardne oznake liste */
	margin-bottom: 10px;
	padding-left:0px;/* Razmak između svake stavke u listi */
}
.location-li
{	width: 100%;
	display: flex;
	flex-direction: column;
	cursor:pointer;
	animation: slideInFromLeft 1s ease-in forwards;
}
.location-li > li 
{
	display: flex;
	justify-content: space-between;
	border-bottom: solid 1px white;
	font-size: 1.7em;
	padding:10px;
	cursor:pointer;
	
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.flex-direction{
	display:flex;
	flex-direction:row;
}
.firstList{
	display: flex;
	flex-direction:column;
	animation: slideInFromLeft 1s ease-in forwards;
}
li>a{
	color:rgba(88, 88, 88, 0.8);
	font-weight: 400;
	transition: transform 0.3s ease-in-out;
}

.firstList > li{
	display: flex;
	justify-content:space-between;
	border-top: solid 1px white;
	font-size: 1.7em;
	padding:10px;
}
li>span{
	background-color:white;
	border-radius: 50%;
	height:40px;
	width:40px;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	justify-content: center;
	color:rgba(88, 88, 88, 0.8);
}
a:hover{
	color:#fff;
}
.title{    
	font-size: 4.2vw;
	font-weight: 700;
	padding-top:15% !important;
}
.liactive{
	font-weight: 600;
	color:black;
}
/* CSS za novi set <li> elemenata */
.new-list {
	opacity: 0; /* Početna prozirnost */
	transition: opacity 0.5s ease; /* Dodajemo tranziciju za prikaz */
}
.new-li
{
	animation: slideInFromLeft 1s ease-in forwards;
}
/* Kada dodamo klasu 'show', prikaži novi set <li> elemenata */
.new-list.show {
	opacity: 1;
}

/* Icon animation */

.firstList li,
.firstList li span {
	transition: padding 0.3s ease; /* Dodaje tranziciju na promjenu paddinga */
	cursor:pointer;
}
#back-button li
{ 
	transition: padding 0.3s ease; /* Dodaje tranziciju na promjenu paddinga */
	cursor:pointer;
}
.firstList li:active,
.firstList li:active span {
	padding-left: 20px; /* Povećava padding kada se klikne na element */
	padding-right: 20px;
}
@keyframes slideInFromLeft {
	0% {
		transform: translateX(-10%); /* Početna pozicija van granica ekrana s lijeve strane */
		opacity: 0; /* Početna prozirnost */
	}
	100% {
		transform: translateX(0); /* Krajnja pozicija - pomjeranje na početnu poziciju (0px s lijeve strane) */
		opacity: 1; /* Potpuna vidljivost */
	}
}

.image-overlay p {
	color: white; /* Bijela boja teksta */
	padding: 10px; /* Margina unutar image-overlay */
	opacity: 1; /* Tekst će biti inicijalno sakriven */
	margin-top: 10px;
	color: #ffffff;
	font-size: 23px;
	line-height: 1.5em;/* Tranzicija za prikaz teksta */
}
.image-overlay h2
{
	margin-top: 0px;
	color: #ffffff;
	font-size: 35px;
	font-weight: 600;
	opacity:1;
	transition: opacity 0.5s ease;
}
.title-phara
{
	font-weight:600;
}
.team-container{
	opacity:0;
}
.team-img{
	display:flex;
	justify-content:space-evenly;
	animation: fadeIn 1s ease-in-out;
}
.show{
	background-color:#f0ecec;
	opacity:1;
	height: 90vh;
	border-radius:20px;
}
.team-text
{
	display:flex;
   flex-direction:column;
   align-items:center;
}

.team-img{
	display:flex;
	flex-direction:row;
}
.team1-overlay > .team1{
	background-image: url('https://wordpress-1328415-5202174.cloudwaysapps.com/wp-content/uploads/2024/02/birgitta.jpg');
	background-repeat:no-repeat;
	background-size:contain;
	width: 240px;
	height: 331px;
	border-radius: 20px;
	margin-top: 30px;
}
.team1-overlay > .team1-text
{
	font-size:20px;
	text-align:center;
}

.team2-overlay > .team2{
	background-image: url('https://wordpress-1328415-5202174.cloudwaysapps.com/wp-content/uploads/2024/02/gudmundur.jpg');
	background-repeat:no-repeat;
	background-size:contain;
	width: 240px;
	height: 331px;
	border-radius: 20px;
	margin-top: 30px;
}
.team2-overlay > .team1-text
{
	font-size:20px;
	text-align:center;
}
.team3-overlay > .team3{
	background-image: url('https://wordpress-1328415-5202174.cloudwaysapps.com/wp-content/uploads/2024/02/thor.jpg');
	background-repeat:no-repeat;
	background-size:contain;
	width: 240px;
	height: 331px;
	border-radius: 20px;
	margin-top: 30px;
}
.team3-overlay > .team1-text
{
	font-size:20px;
	text-align:center;
}

/* Image style */
.image-overlay {
	background-color: rgba(0, 0, 0, 0.5); /* Prilagodite boju i prozirnost po potrebi */
	display: none; /* Koristimo fleksibilni layout */
	flex-direction: column; /* Postavljamo da djeca (tekst) budu jedno ispod drugog */
	justify-content: center; /* Centriranje vertikalno */
	align-items: center; /* Centriranje horizontalno *//* Skrivamo sve što je izvan granica */
	border-radius:20px;/* Dodajemo tranziciju za širenje teksta */
	animation: slideInFromLeft 1s ease forwards;
	height:90vh;
	padding:25px;
}
.team-text > p{
	font-size:20px;
}
.team-text{
	animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.text-content {
	width: 100%; /* Širina teksta */
	text-align: left; /* Poravnanje teksta s lijeva */
	transition: opacity 0.5s; /* Dodajemo tranziciju za prikaz teksta */
	opacity: 0; /* Početna prozirnost teksta */
}
/* Kada text-overlay dobije klasu active, prikaži tekst */
.text-overlay.active .text-content {
	opacity: 1; /* Prikaži tekst */
}
/* Dodatni stilovi za glatki prijelaz */
.back-btn{
	display:flex;
	flex-direction:row-reverse;
	font-weight:700;
	justify-content:start;
	cursor:pointer;
}
#tax-rebate-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #F0ECEB;
	z-index: 10000;
}

#calculator {
	width: 60%;
	height: 100%;
	margin: auto;
	background-color: #F0ECEB;
	border-radius: 5px;
	text-align: center;
}

#result {
	margin-top: 20px;
	justify-content: space-evenly;
}

#amountInput{
	display: block;
	  width: 25%;
	  padding: 10px;
	  font-size: 20px;
	font-weight: 800;
	  border-radius: 4px;
	 border: 1px solid #ccc;
	background-color:#fff;
	text-align:right;
}
#rebateAmount{
	display: block;
	  width: 25%;
	  padding: 10px;
	  font-size: 20px;
	font-weight: 800;
	  border-radius: 4px;
	 border: 1px solid #ccc;
	background-color:#fff;
	text-align:right;
}
#result span {
	font-weight: bold;
}
#tax-rebate-calculator
{
	margin-left : 20px;
}
.fa-solid
{
	margin-top: 50px;
	color:#000;
	width:100px;
	height:100px;
	cursor:pointer;
	z-index:1000;
}
.title-calc{
	font-size: 2rem;
	  margin-bottom: 1rem;
}
.phar-calc{ 
	font-size:16px;
}
.calc-text
{
	font-size: 18px;
	text-align: left;
	margin-left: 150px;
	line-height: 50px;
}
.phara-strong
{
	font-size:24px;
}
#here-text{
	text-decoration:underline;
	color:black;
	cursor:pointer;
}
.rabate-info
{
	display:none;
	background-color:#F0ECEB;
	width:50%;
	height:100%;
	top:50%;
	margin:auto;
}
.rabate-info-p{
	display:none;
	font-size:20px;
}
.learn-more-button {
	padding:10px;
	margin:10px;
	border-radius:25px;
	background-color: #ffffffd6;
	border: 2px solid white;
	text-align: right;
	font-size: 10px;
	font-weight: bold;
	position: absolute;
	bottom: 5%; /* Adjust this value to position it correctly */
	left: 82%;
	cursor:pointer;
	color:#000 !important;
}
.learn-more-button:hover {
	color:#000 !important;
}